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

Question

不知何故我无法让它工作，我试图在 img 悬停时显示一个 div(在 li 元素内)或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元素中的类，而不是a sibling