好的，所以我想知道如何在鼠标悬停时选择多个项目，例如当我将鼠标悬停在列表a上时，突出显示a，并在列表b上显示框阴影。我尝试编写代码，但由于某些原因无法实现多个悬停效果。
CSS代码：
#a:hover ~ #b {
background: #ccc
}
HTML代码：
<div><ul id="a"><li>Div A</li></ul></div>
<div>random elements</div>
<div>random elements</div>
<div>random elements</div>
<div><ul id="b"><li>Div B</li></ul></div>
<div id="a">
<ul >
<li>Div A</li>
</ul>
</div>
<div>
random elements
</div>
<div>
random elements
</div>
<div>
random elements
</div>
<div id="b">
<ul >
<li>Div B</li>
</ul>
</div>
如果您想要使用jQuery解决方案，可以参考以下链接：http://jsbin.com/AxUzOX/4/edit
~，因为它们不是兄弟节点。 - Royi Namir你应该给包含 ul 标签的父级 div 元素指定一个 class 名称或 id 名称，例如 #a，但是如果你不想指定名称，你可以使用下面所示的 :first-child：
#a:hover {
background: #ccc
}
div:first-child:hover ~ div>ul#b{
color: red;
}
正如您所看到的，我悬停在 div 的第一个子元素上，而不是 ul，因为在您的情况下，悬停在 ul 上与悬停在父 div 上相同。
我这样做是因为在 css 中没有父选择器可用，甚至在 css3/css4 中也没有。
对于您之前的兄弟选择器问题，请使用 jquery。
$('#b').hover(function() { $('#a').css('color','blue'); });
其他的事情你可以像平常一样只用 CSS 来做 :)
这是我使用的 jQuery
$('#a').hover(function(){
$('#a').css('background','#ccc');
$('#b').css('background','#ccc');
}, function(){
$('#a').css('background','#fff'); // Background of #a by default
$('#b').css('background','#fff'); // Background of #b by default
})
$('#b').hover(function(){
$('#a').css('background','#ccc');
$('#b').css('background','#ccc');
}, function(){
$('#a').css('background','#fff'); // Background of #a by default
$('#b').css('background','#fff'); // Background of #b by default
})
如果您添加一个包装div，就可以在没有任何js的情况下实现它。
您示例中唯一的问题是中间的<div>没有应用任何效果，因此jsfiddle解决方案看起来有点奇怪，但是调整效果可能就是您想要的。
这个想法是当您悬停在父元素上并应用样式时，然后当鼠标悬停在子元素上时将不同的样式应用于该子元素。
如果可能，请尽量避免使用id，它们会限制您的需求。
.parent:hover .list-a, .parent:hover .list-b {
box-shadow: 3px 3px 5px 6px #ccc;
}
.parent .list-a:hover {
box-shadow: none;
background:#aaa;
}
.parent .list-b:hover {
box-shadow: none;
background:#4c4;
}
$(function(){
$('#a').hover(function(){
$('#a').addClass('.list-one-effect');
$('#b').addClass('.list-two-effect');
}, function(){
$('#a').removeClass('.list-one-effect');
$('#b').removeClass('.list-two-effect');
})
});
一旦您删除类，它将自动恢复到原始状态（或上次被其他效果更改的状态！）。jQuery还有一个toggleClass函数，但我建议您不要使用它，因为上面的代码将始终告诉您当前处于什么状态。为了完整起见，这个代码块被包裹在$(function(){})中，这是一种确保您已经加载了jQuery并且页面准备好运行此代码的常见方法。