将鼠标悬停在另一个div上时，如何更改另一个div的背景颜色? [英] How to change the background color of another div when hover on another div?

问题描述

因此，我正在将太阳能"作为学校项目制作成HTML.我在印度上七年级.我想在一个带有ID的div上徘徊:#source，#source_wr和#arrow-right;带有#source的div的背景色应更改.

so, I am making an HTML on 'solar energy' as a school project. I am in seventh class in India. I want that when one hovers on these divs with ids: #source, #source_wr, and #arrow-right; the background color of the div with #source should change.

我成功地将鼠标悬停在#source本身上，但是没有将其悬停在其他两个代码上.这是我正在使用的代码:

I am successful with hovering on #source itself, but not on the other two. here's the code I am using:

<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;
}

但是这不起作用！！！请帮助，如果我需要更具体一点，我会...请不要说没有Java语言就无法实现！是的，所有div都直接位于主体内部(但是在包含所有主页和更多div的div之后)

but this isn't workingg !!! Please help, if i need to be more specific I will be... please don't say it cannot be achieved without Javascript ! And yeah, all the divs are directly inside the body ( but after a div which contains all of the main page and many more divs)

先谢谢您.

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

HERE'S THE LINK FOR THE ENTIRE HTML... DOWNLOAD EVERYTHING IN THE SAME FOLDER EXCEPT THE PSD FILES WHICH DON'T NEED TO BE DOWNLOADED. https://docs.google.com/folder/d/0BwFpYt0oAQbqT0xiUDNNRTVQOWs/edit?usp=sharing

推荐答案

尝试 general-sibling-combinator 〜，它会选择以下任何兄弟姐妹，其中

Try the general-sibling-combinator ~, it selects sibling any following sibling where as + on selects the very next sibling.

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

这篇关于将鼠标悬停在另一个div上时，如何更改另一个div的背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！