logo标签列表

CSS：悬停在一个元素上，对多个元素产生影响吗？

cssxhtmlhover
94

我正在寻找解决鼠标悬停问题的方法。

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

现在，image和layer两个类都有边框。它们分别有正常和悬停状态下不同的颜色。 有没有办法使得当悬停在layer类时，同时激活layer和image类的悬停边框颜色呢？反之亦然？

7个回答
212

你不需要使用JavaScript来实现这个功能。

使用一些CSS就可以了。以下是一个示例：

<html>
  <style type="text/css">
    .section { background:#ccc; }
    .layer { background:#ddd; }
    .section:hover img { border:2px solid #333; }
    .section:hover .layer { border:2px solid #F90; }
  </style>
</head>
<body>
  <div class="section">
    <img src="myImage.jpg" />
    <div class="layer">Lorem Ipsum</div>
  </div>
</body>
</html>

15
好的，这是赢家！！:) 我不知道如果我有一些东西:hover，我还可以用另一个元素继续它！（something:hover .second）。每天都会学到新东西。谢谢十倍。 - Marko
8
如果需要悬停的那个div和需要显示的那个div不在同一个父级div中，怎么办？请为我进行翻译。 - Bikash Gyawali
3
你可以一直向上爬到你需要的层级，或者你可以添加一个项目作为两者的父级。但如果它们没有共同点，有时你需要使用JavaScript。 - corymathews
4
当鼠标停留在同一个 div 元素的另一个子元素上时，我该如何更改一个子元素？ - Cos
如果我需要将鼠标悬停在内部元素上并在外部元素中显示它呢？ - Johnny_D
显示剩余2条评论
11

这对我在Firefox和Chrome和IE8中都有效...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
    <head>
        <style type="text/css">
        div.section:hover div.image, div.section:hover div.layer {
            border: solid 1px red;
        }
        </style>
    </head>
    <body>
        <div class="section">
            <div class="image"><img src="myImage.jpg" /></div>
            <div class="layer">Lorem Ipsum</div>
        </div>
    </body>
</html>

... 你可能也想在IE6上进行测试（我不确定它是否能在那里正常工作）。

实际上它似乎可以在IE8中工作。添加Doctype使得差异明显。所以这里有一个纯CSS的解决方案。;) - Steve Wortham
10

我认为最好的选择是将这两个div都包裹在另一个div中。然后您可以使用以下CSS进行设置：

<html>
<head>
<style>
  div.both:hover .image { border: 1px solid blue }
  div.both:hover .layer { border: 1px solid blue }
</style>
</head>

<body>
<div class="section">

<div class="both">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

</div>
</body>
</html>
7

实现这并不难，但需要使用javascript的onmouseover函数。伪代码：

<div class="section">
<div class="image"><img src="myImage.jpg" onmouseover=".layer {border: 1px solid black;} .image {border: 1px solid black;}" /></div>
<div class="layer">Lorem Ipsum</div>
</div>

您可以自己选择颜色，也可以在mouseover命令中引用javascript函数。

1
使用类CSS更改而不是元素CSS作为另一个示例，加1。 - DVK
这也在运行，谢谢！我尽量避免内联编码.. ;) - Marko
2
我认为您需要使用JavaScript来实现这一点。
jQuery：
$(function(){
   $("#innerContainer").hover(
        function(){
            $("#innerContainer").css('border-color','#FFF');
            $("#outerContainer").css('border-color','#FFF');
        },
        function(){
            $("#innerContainer").css('border-color','#000');
            $("#outerContainer").css('border-color','#000');
        }
    );
});

根据需要相应地调整值和元素ID :)
不错，真的很不错！如果我有多个相同类名的部分怎么办？现在我已经尝试了四个相同类名的部分，当我悬停在其中一个上时，它们全部都会改变？？ 我应该在所有部分前面加上运行编号吗？jQuery是否支持任何通配符支持？（好的，我只是试着在谷歌上搜索！;））谢谢.. - Marko
1
你也可以这样做。例如，如果你有一个链接附加在另一个链接上，并且想要同时显示两者的悬停效果，只需简单地指定每个链接的功能，然后在悬停时同时执行即可。 

.videoTitle:hover{
     color: #1270cf;
} 
.videoTitle:hover .copy{
     display: block;
}

0

或者

.section:hover > div {
  background-color: #0CF;
}

注意 父元素的状态只能影响子元素的状态， 因此您可以使用：

.image:hover + .layer {
  background-color: #0CF;
}
.image:hover {
  background-color: #0CF;
}

但是你不能使用

.layer:hover + .image {
  background-color: #0CF;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接