在悬停时使用css在li元素内显示div不起作用

时间:2013-11-30 03:19:11

标签: html css css3

不知何故,我无法使其有效,我试图在divli元素悬停时显示imgli元素内部)。有人可以帮我这个吗?

HTML

<ul class="step-nav clearfix" id="leftright">
  <li class="pret button" id="pret" style="left:50%; top:50%; margin-left: -635px; position:fixed">
    <a class="pLocation linkFX" style="outline: 0;" href="blah"><img src="images/arrow.png"></a>
    <a class="sublinkCat" style="color: #fff;" href="blah">
      <div class="titlePR">
        <h1 class="title" style="margin-top: 25px;font-family: Arial, sans-serif; font-size: 14px; text-align: center;">Title</h1>
      </div>
    </a>
  </li>
</ul>

CSS

.titlePR {
  display: none;
  left:50%;
  top:50%;
  margin-left: -600px;
  position:fixed;
  width: 154px;
  height: 70px;
  background: #222;
  text-align: center;
  vertical-align:middle;
}

.pret:hover + .titlePR {
  display: block;
}

1 个答案:

答案 0 :(得分:2)

变化:

.pret:hover + .titlePR { display: block; }

要:

.pret:hover .titlePR { display: block; } /* .titlePR is a descendant,
                                            not a sibling */

注意:此处+不适用,因为.titlePRli元素中的类,而不是兄弟