Question

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

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

<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溢出时看了下面的内容，但没有运气。 link 1 link 2 link 3 link 4

请帮忙！我认为这是我的标记，但我已经改变了几次而且没有解决它。

任何指向正确方向的人都会受到赞赏。我只设置了CSS，但如果java脚本修复它，那也很好。

由于

的Fab

Answer 1

你想声明：悬停在li上，然后选择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; }

CSS中嵌套列表项的双悬停效果

1 个答案: