选择器#div1 p:hover + #div2 img无效，我无法理解原因。
尝试在div 1中的对象上创建hover会影响div2中仅使用CSS的对象的CSS设置。请帮忙。
我正在使用Chrome。
#div1 #x:hover + #div2 #y {
width: 200px;
}<div id="content">
<div id="div1">
<p id="x">1234</p>
</div>
<div id="div2">
<img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
</div>
</div>
答案 0 :(得分：3)
这不起作用，因为#div2不是p标记的adjacent sibling（实际上甚至不是兄弟）。它是#div1的兄弟姐妹。
以下是您的选择器的解释方式。
#div1 #x:hover + #div2 #y
当鼠标结束（或hover）且id='x'元素是id='div1'元素的子元素时，请在另一个元素下选择id='y'元素id='div2' id='x'，它是#div2元素的相邻兄弟。
如果您想使上述选择器正常工作，则应更改HTML，如下面的代码段所示。请注意，在此示例中，#x是#div1 #x:hover + #div2 #y {
width: 200px;
}的相邻兄弟。
<div id="content">
<div id="div1">
<p id="x">1234</p>
<div id="div2">
<img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
</div>
</div>
</div>#div1
另一个选项（如果您的#x没有hover 以外的元素）将#div1放在#div1:hover + #div2 #y {
width: 200px;
}本身上在以下代码段中。
<div id="content">
<div id="div1">
<p id="x">1234</p>
</div>
<div id="div2">
<img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
</div>
</div>classList
如果以上都不能应用，那么你必须使用JavaScript（或jQuery之类的各种JS库之一）来实现你所需要的。以下是使用JavaScript的示例（使用HTML5 mouseover功能，但也可以轻松修改非HTML5兼容的浏览器。）
在此示例中，我们为mouseout元素上的#x和.test事件添加处理程序，并切换width类（更改#y ）document.getElementById('x').onmouseover = function() {
document.getElementById('y').classList.add('test');
}
document.getElementById('x').onmouseout = function() {
document.getElementById('y').classList.remove('test');
}元素。
.test {
width: 200px;
}<div id="content">
<div id="div1">
<p id="x">1234</p>
</div>
<div id="div2">
<img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
</div>
</div>{{1}}＆＃13;