Question

我有:hover：

http://jsfiddle.net/andrewhoward_im/hLc42dw3/

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

工作正常。

但是，我已将其添加到自定义WordPress主题 - http://www.letsgobucketlisting.com/ - 我似乎无法让它工作。

Answer 1

也许您的网站中有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;
}

Answer 2

WordPress在您的主播和跨度之间添加了<br>

因此您的相邻兄弟选择器将无效。

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

我已经为您的小提琴添加了<br>，以便您可以看到结果。 http://jsfiddle.net/hLc42dw3/1/

将锚点和范围添加到一行或两者之间添加html注释以防止其他换行符。

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

div问题：悬停

2 个答案: