Question

所以，我正在制作关于“太阳能”的HTML作为学校项目。我在印度的七年级。我希望当一个人用ids徘徊在这些div上时：＃source，＃source_wr和#arrow-right;使用#source的div的背景颜色应该改变。

我成功地将鼠标悬停在#source上，但不是另外两个。这是我正在使用的代码：

<div id="arrow-right"></div>
<div id="source_wr">Source</div>
<a href="http://www.wikipedia.org/" target="_blank">
<div id="source">
</div>
</a>

这是css：

#source_wr{
color: #56C8E3;
font-family: oswald, sans-serif;
font-size: 20px;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 200;
position:absolute;
top:210px;
right:300px;
}
#arrow-right{
width:0px;
height:0px;
border-bottom:25px solid transparent;
border-top:25px solid transparent;
border-left:25px solid #56C8E3;
position:absolute;
top:180px;
right:270px;
}
#source{
position:absolute;
top:0px;
right:0px;
height:240px;
width:264px;
background:url('wiki.png');
background-size:264px 240px;
}
#source:hover{
background:url('wikihover.png');
background-size:264px 240px;
}
#source_wr:hover + #source{
background:url('wikihover.png');
background-size:264px 240px;
}

但这不起作用!!!请帮助，如果我需要更具体，我会...请不要说没有Javascript就无法实现！是的，所有的div都直接在体内（但在包含所有主页和更多div的div之后）

提前谢谢你。

这里是整个HTML的链接...除了不需要下载的PSD文件之外，在同一个文件夹中下载所有内容。 https://docs.google.com/folder/d/0BwFpYt0oAQbqT0xiUDNNRTVQOWs/edit?usp=sharing

Answer 1

尝试general-sibling-combinator ~，它选择兄弟姐妹的任何兄弟，其中+ on选择下一个兄弟。

#source_wr:hover ~ a #source,#arrow-right:hover ~ a #source{
    background:url('wikihover.png');
    background-size:264px 240px;
}

Answer 2

您没有关闭<a>
我建议您将<a>更改为<span>

$('.source').on('click', function () {
    var url = $(this).find('span').attr('src');
    window.location(url);
});
$('.source').on('hover', function () {
    $(this).css('background-color', '#999'); //new color
}, function {
    $(this).css('background-color', '#666'); //original color
});

Answer 3

您可以使用以下css

简单地应用效果

#source_wr:hover #source{*the effect you want on source*}
#arrow-right:hover #source {*The effect you want on source*}
#source:hover {*effect*}

如何在另一个div上悬停时更改另一个div的背景颜色？

3 个答案: