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

【问题标题】：CSS: Hover one element, effect for multiple elements?CSS：悬停一个元素，多个元素的效果？
【发布时间】：2010-11-30 13:07:24
【问题描述】：

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

<div class="section">

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

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

</div>

现在，图像和图层这两个类都有边框。两者对于正常和悬停都有不同的颜色。有没有办法做到这一点，所以如果我悬停图层类，图层和图像类悬停边框颜色都是活动的？反之亦然？

【问题讨论】：

标签： css xhtml hover

【解决方案1】：

我认为您需要使用 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 是否有任何类型的通配符支持？（好吧，我试着用谷歌搜索它！;)）谢谢..

【解决方案2】：

这并不难实现，但是需要用到javascript的onmouseover函数。伪脚本：

Lorem Ipsum

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

【讨论】：

+1 用于使用类 CSS 更改而不是元素一作为另一个示例。
这也行得通，谢谢！我只是尽量避免内联编码.. ;)

【解决方案3】：

这在 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 解决方案。 ;)

【解决方案4】：

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

【讨论】：

好吧，赢家了！！ :) 我不知道如果我有一些东西：悬停，我可以继续使用另一个元素！ (somthing:hover .second).. 每天你都会学到新东西.. 谢谢 x10
如果两个 div（悬停的一个和显示的一个）不在同一个直接父 div 中怎么办？
您可以根据需要将结构向上提升，或者您可以添加一个项目作为两者的父项。但有时，如果它们没有共同点，您将不得不求助于 javascript。
当悬停同一 div 的另一个子元素时，我将如何更改 div 的一个子元素？
谢谢！我使用的是 javascript，这个 CSS 效果更好。有时它比我们想象的要容易。

【解决方案5】：

我认为对您来说最好的选择是用另一个 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>

【讨论】：

【解决方案6】：

或

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

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

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

但你不能使用

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

【讨论】：

【解决方案7】：

你也可以这样做。例如，您有一个附加到另一个链接的链接，并且您希望在悬停时显示两者，您可以简单地通过指定每个人的功能然后同时悬停两者来实现。

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

【讨论】：