CSS：悬停一个元素，对多个元素有影响吗？

83

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

<div class="section">

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

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

</div>

现在，图像和图层这两个类都有边框。两者的正常和悬停都有不同的颜色。有办法做到这一点，因此，如果我将图层类悬停，则图层和图像类的悬停边框颜色都处于活动状态？反之亦然？

css xhtml hover

— 马可
source

188

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

展开摘要

— Corymathews
source

12

Okey，这是赢家！:)我不知道我是否有东西：悬停，我可以继续其他元素！（somthing：hover .second）..每天您都学到新东西..谢谢x10

— Marko

6

如果两个div（一个悬停并显示的div）不在同一直接父div内怎么办？

— bikashg 2011年

3

您可以根据需要扩展结构，也可以添加一个项目作为两者的父项。但是有时，如果它们没有共同点，则必须使用javascript。

— corymathews 2011年

2

当悬停同一div的另一个子元素时，如何更改div的一个子元素？

— Cos 2012年

谢谢！我使用的是JavaScript，此CSS的效果更好。有时，它比我们想象的要容易。

— yanike 2012年

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进行测试（我不确定它是否可以在其中运行）。

— 史蒂夫·沃瑟姆
source

看来，它实际上可以在IE8中使用。添加Doctype带来了不同。因此，有一个纯CSS解决方案。;）

— 史蒂夫·沃瑟姆

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>

— 维利亚姆
source

8

这并不难实现，但是您需要使用javascriptonmouseover函数。伪脚本：

<div class =“ section”>

<div class =“ image”> <img src =“ myImage.jpg” onmouseover =“。layer {边界：1像素纯黑；} .image {边界：1像素纯黑；}” /> </ div>

<div class =“ layer”> Lorem Ipsum </ div>

</ div>

使用您自己的颜色。您还可以在mouseover命令中引用javascript函数。

— 依卡纳尔
source

1

+1用于使用类CSS更改而不是元素one作为另一个示例。

— DVK

这也正在工作，谢谢！我只是尽我所能避免内联编码。.）

— Marko 2009年

3

我想，您需要使用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 :)

— 布雷特凯利
source

很好，真的很好！如果我的同一个班级名称有多个部分怎么办？现在，我尝试使用四个相同的类名，将鼠标悬停在一个类名上时，所有这些更改？我应该在所有部分的开头加上序号吗？jQuery有通配符支持吗？（好，我尝试只是谷歌吧！;））谢谢..

— 马尔科

0

要么

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

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

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

但是你不能使用

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

— n
source