3

好吧，所以我想知道如何在悬停时选择多个项目，例如，当我悬停在列表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>
4

4 回答 4

1

波浪号~是给兄弟姐妹的。

但#b不是兄弟姐妹#a

更改 ID，它将起作用：( http://jsbin.com/AxUzOX/1/edit )

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

如果您想要http://jsbin.com/AxUzOX/4/edit，这里是 jquery 解决方案

于 2013-09-27T06:10:53.453 回答
0

您实际上应该向具有 ul 的父 div 提及一些类名或 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 做的其他事情:)

于 2013-09-27T06:26:31.357 回答
0

这是我用过的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 
})

如果您要更改#a 或#b 的背景，请将颜色指定为我提到的位置。简单的 ：）

于 2013-09-27T06:28:49.383 回答
0

如果你添加一个包装器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;
}

http://jsfiddle.net/tHTN4/

现在让我们重新编辑 jQuery 部分。由于您不了解任何jQuery，或者知识量不大。jQuery（基于 Javascript 的工具）只是帮助您以简单有效的方式操作 HTML（DOM）。为了帮助您不在多个位置编辑 css，请使用 addClass 和 removeClass 函数：

$(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 并且页面已准备好运行此代码的一种常用方法。

于 2013-09-27T06:47:02.187 回答