Question

我正在寻找悬停问题的方法。

<div class="section">

<div class="image"><img src="myImage.jpg" /></div>

<div class="layer">Lorem Ipsum</div>

</div>

现在，两个类（图像和图层）都有边框，两者都有正常和悬停的不同颜色。有没有办法这样做，如果我悬停图层类，层和图像类悬停边框颜色是活跃的？反之亦然？

Answer 1

您不需要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>

Answer 2

这适用于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测试它（我不确定它是否可以在那里工作）。

Answer 3

我认为最好的选择是将两个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>

Answer 4

这并不难实现，但您需要使用javascript onmouseover函数。 Pseudoscript：

<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函数。

Answer 5

我认为你需要使用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：）

Answer 6

或

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

请注意父元素状态只能影响子元素的状态所以你可以使用：

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

但你不能使用

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

Answer 7

你也可以这样做。例如，您有一个附加到另一个链接的链接，并且您想在悬停时显示这两个链接，您只需指定每个人的功能，然后同时悬停在两个链接上即可。

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

CSS：悬停一个元素，多个元素的效果？

7 个答案: