html - div :hover 问题

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;
}