当鼠标悬停在单词上时显示关闭按钮

Question

我希望在光标悬停在单词上时显示近距离图像。 关闭图像应显示在所选单词的左上角。 但是，它只显示所有单词的一个关闭按钮。

我的目标是设置一个关闭按钮，例如“应用程序”和“应用程序”。红色的确如此。

＆＃13;

＆＃13;

  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;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

}

Answer 1

我能够找到一个紧密的解决方案

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/

我正在使用chrome 56