Html div的问题：悬停

我有这个

：悬停
：



文本

很好用

但是，我已将其添加到自定义的WordPress主题中--我似乎无法使其正常工作。
可能您的网站中有CSS规则覆盖了自定义CSS规则，请尝试以下操作：

.pin-content {
  position: absolute;
  opacity: 0 !important;
  width: 120px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition: opacity 0.5s;
  -webkit-transition: opacity 0.5s; 
  border-radius: 5px;
  margin-left: -50px;
  background-color:#333333;
  color: #ffffff;
}

#pin1:hover + #pin1-content {
  opacity: 1 !important;
}

WordPress在您的锚和span之间添加了一个


因此，相邻的同级选择器将无法工作

#pin1:hover + #pin1-content {
    opacity: 1;
} 

我在你的小提琴上加了一个

，这样你就可以看到结果了。

在单行上添加锚点和跨距，或在两行之间添加html注释，以防止额外的换行标记

<a href="#" id="pin1" class="pin"></a><!--
--><span id="pin1-content" class="pin-content">text</span>

文本
感谢以上两种方法的共同作用！不客气，请将我的答案标记为正确。您不需要添加
！重要信息
对于这种风格，没有它也可以。我用下面的风格更新了你的小提琴，它对你的问题没有影响
<a href="#" id="pin1" class="pin"></a><!--
--><span id="pin1-content" class="pin-content">text</span>