當鼠標懸停在單詞上時顯示關閉按鈕

我想在光標懸停在單詞上時顯示關閉圖像。關閉圖像應顯示在所選單詞的左上角。但是，它只顯示所有單詞的一個關閉按鈕。當鼠標懸停在單詞上時顯示關閉按鈕

inline

我的目標是有一個像紅色的字「應用」做了關閉按鈕。

inline

span.mydict_highlighted { 
 
    background-color: yellow; 
 
} 
 

 
span.birch_close_btn { 
 
    position: absolute; 
 
    opacity: 0; 
 
    transform: scale(0.6); 
 
    left: -8px; 
 
    top: -8px; 
 
    width: 160px; 
 
    height: 160px; 
 
    cursor: pointer; 
 
    z-index: 1000; 
 
    transition: opacity 275ms, transform 275ms cubic-bezier(0.175, 0.885, 0.32, 1.275), background 175ms; 
 
    float: right; 
 
    text-shadow: 0 1px 0 #ffffff; 
 
    opacity: 0.2; 
 
    filter: alpha(opacity=20); 
 
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAB+UlEQVRoQ+2a8TUEMRCHv6sAHeiADlABHdABKkAF6IAKUAElUIEWqID38xIvF3u3ezuzebm1+efe29vdzJffZDLZzIyRtNlIOGgC2QcuAP3W2B6BW+AlNS4HuQwQNQLkNl0BsvenpSBS4Bn4DDfcAR+VEW0CJ8G+DeAgKpOCSKo94By4qQwgN+cMuAaegKNcka9w91aFSuQg28B76lWpIhFkXSLZnL0TSAVzaFKkAhHmTJgUGbUiWoy0kFozAK3Yp4DSjq7NzbUE8QC8hlShL4wglBrtBpDf/KmFyA1EBkiNHQNMCvEWMu6uA+IGogGzwFgg1LcrSF8YK8QgIKvCeEAMBtIVxgtiUJA2GE+IwUEWweh6DLGrRqdFUdh9sjd1lEcz3aN1wguiiCIRLIXRNU+I4iDRndSxNQPIlS/mWumckBGWDKDJfQcHaYpOMsSazhRVZFmItaQzRRXpsk54wgziWl0gmqKZJQC4g6wC4QnjCtIHwgvGDcQC4QHjBhK3utYVOw0Ac0cFpba66sfz44O+sHfdrxdNUVoG1Py3m2uZLTG+YAIxDqD745Mi7kNqfOH/UWTtD0NVUXA4huPpWDCgj8haYe8djguM0+DP40pnjpM6gMaCAT01ihKOiC9llPfIzWpsqnZQZcbSopoaDe9k07pUObTCfANYh9wzfSoUuwAAAABJRU5ErkJggg==) no-repeat border-box;

<span class="mydict_highlighted"> 
 
     building 
 
     <span class="birch_close_btn"> </span> 
 
</span>

}

來源

2017-03-12 newBike

我能夠找到一個解決方案緊密

too many words around a closed 
<span class="mydict_highlighted">building</span> 
<span class="birch_close_btn"> but the</span> close button is <span class="mydict_highlighted">hard</span> to find 



// css rule you are looking for 
    span.mydict_highlighted:hover:after { 
     background: #abf; 
     content: 'x'; 
     vertical-align: top; 
     font-size: 0.7em; 
    }

請參閱鏈接https://jsfiddle.net/0yd7L02x/

我正在使用鉻56

來源

2017-03-12 20:09:11

當鼠標懸停在單詞上時顯示關閉按鈕

回答

相關問題