悬停时无法更改另一个元素的背景颜色

Question

我创建了一个包含元素的列表。我希望#tags_image 的背景色在您悬停元素 1 时变为黄色，在悬停元素 2 时变为蓝色等。这是我的 HTML 代码：

<ul id="tags">
    <li><div id="tag1">Familie</div></li>
    <li><div id="tag2">Uncharted</div></li>
</ul>
<div id="tags_image"><img src="images/transparent.png" width="100%"></div>

还有我的 CSS：

#tags {
    padding: 4px;
    display: inline-block;
}

#tags_image {
    display: inline-block;
    margin-left: 7.5%;
    width: 20%;
    background-color: red;
}

#tags li {
    display: inline;
    cursor: pointer;
}

#tags #tag1:hover + #tags_image {
background-color: yellow;
}

#tags #tag2:hover + #tags_image {
background-color: blue;
}

但是，这似乎不起作用。问题不在于 :hover 属性，因为我可以通过这种方式更改 tag1 和 tag2 的元素，但无法更改 #tags_image 的元素。

我该如何解决这个问题？任何帮助将不胜感激！

Answer 1

您可以使用 jQuery 来操作它。

$("#tag1").hover(function(){
    $("#tags_image").css('background','yellow');
});

$("#tag2").hover(function(){
    $("#tags_image").css('background','blue');
});

CMIIW~