代码之家 › 专栏 › 技术社区 › Marko

将一个元素悬停,对多个元素有效果?

hover xhtml css

Marko · 技术社区 · 15 年前

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

<div class="section">

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

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

</div>

现在,这两个类(图像和图层)都有边框,对于普通和悬停都有不同的颜色。如果我悬停图层类,图层和图像类悬停边框颜色是否都是活动的?反之亦然?

6 回复 | 直到 6 年前

166

Community CDub 9 年前

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

Steve Wortham 15 年前

这在火狐、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测试这个(我不确定它是否能在那里工作)。

Viliam 15 年前

我认为对您来说最好的选择是用另一个分区将两个分区都括起来。然后您可以用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>

eykanal 15 年前

这并不难实现,但您需要使用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函数。

NightOwl888 Jabrwoky 6 年前

我认为,您需要使用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:)

Igor Ivancha 9 年前

或

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

注释父元素状态只能影响子元素状态所以你可以使用:

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

但是你不能使用

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