无法更改悬停时其他元素的背景颜色 [英] Can't change background-color of another element on hover
本文介绍了无法更改悬停时其他元素的背景颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我创建了一个包含元素的列表。我希望当你悬停元素1时, #tags_image
的背景颜色变为黄色,当悬停元素2时变为蓝色等。这是我的HTML代码:
I've created a list with elements. I want the background color of #tags_image
to change to yellow when you hover element 1, to blue when you hover element 2, etc. This is my HTML code:
<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
的元素。
However, this doesn't seem to work. The problem is not with the :hover attribute, because I can change elements of tag1 and tag2 this way, but I can't change the elements of #tags_image
.
如何解决这个问题?
推荐答案
您可以使用jQuery来操作这个。
You can use jQuery to manipulate this.
$("#tag1").hover(function(){
$("#tags_image").css('background','yellow');
});
$("#tag2").hover(function(){
$("#tags_image").css('background','blue');
});
CMIIW〜
这篇关于无法更改悬停时其他元素的背景颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文