1

我正在尝试为列表项获得不同的悬停效果。

我的列表是图像和标题（都是从 wordpress 中提取的） - 我希望标题的背景框在悬停时改变颜色（父 Li）和应用于图像的效果（我在 js fiddle 示例中使用了不透明度） .

这是一个jsfiddle 

<li id="item" class="item">
        <a href="#"><img src="http://placekitten.com/g/200/300"/></a>
          <br />
        <a href="#" class="p_title">Entry 6</a>
</li>

情况1：将鼠标悬停在图像上，一切都按我的意愿进行。

情况2：只将鼠标悬停在黑盒子上，你会得到不同的效果。

我想要情况 2 结果 = 情况 1 结果。

我在 Stack Overflow 上查看了以下内容，但没有运气。 链接 1 链接 2 链接 3 链接 4

请帮忙！我以为这是我的标记，但我已经更改了几次，但并没有解决它。

任何正确方向的指针将不胜感激。我只设置了 CSS，但如果 java 脚本修复它，那也很好。

谢谢

晶圆厂

4

1 回答 1

0

您想在 li 上声明 :hover 然后选择 img 或之后的标题。此外，您的标记可能会更好一些。例如：

<li class="item">
  <a href="#">
    <img src="http://placekitten.com/g/200/300" />
    <br />
    <span class="p_title">Entry 6</span>
  </a>
</li>

li.item:hover img {
  opacity: 1; }

li.item:hover {
  background-color: #fb8008; }
于 2013-07-31T11:27:04.127 回答