Question

不知何故，我无法使其有效，我试图在div或li元素悬停时显示img（li元素内部）。有人可以帮我这个吗？

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

Answer 1

变化：

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

要：

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

注意：此处+不适用，因为.titlePR是li元素中的类，而不是兄弟

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

1 个答案: