CSS 有没有办法将鼠标悬停在一个元素上并影响另一个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6867257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there any way to hover over one element and affect a different element?
提问by Marlon
I want it to be as simple as this, but I know it isn't:
我希望它像这样简单，但我知道它不是：
img {
opacity: 0.4;
filter: alpha(opacity=40);
}
img:hover {
#thisElement {
opacity: 0.3;
filter: alpha(opacity=30);
}
opacity:1;
filter:alpha(opacity=100);
}
So when you hover over img, it changes the opacity of #thisElement to 30% and changes the opacity of the image to 100%. Is there a way to actually do this using only css?
因此，当您将鼠标悬停在 img 上时，它会将 #thisElement 的不透明度更改为 30%，并将图像的不透明度更改为 100%。有没有办法只使用 css 来做到这一点？
So this is the HTML
所以这是 HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="C:\Users\Shikamaru\Documents\Contwined Coding\LearningToCode\Learning jQuery\js\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="briefcase.js"></script>
<link rel="stylesheet" type="text/css" href="taskbar.css"/>
<link rel="stylesheet" type="text/css" href="briefcase.css" />
<title>Briefcase</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div class="mask"></div>
<div class="float">
<div id="album1">Album Title</div>
<img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" />
<img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" />
<img class="left" src="mattWaterRun.jpg" alt="Photoshopped Matt" />
</div>
<div class="gradientTop"></div>
<div class="gradientBottom"></div>
</body>
</html>
And this is the CSS:
这是 CSS：
body {
font: normal small/3em helvetica, sans-serif;
text-align: left;
letter-spacing: 2px;
font-size: 16px;
margin: 0;
padding: 0;
}
div.gradientTop {
position: absolute;
margin-top: 5px;
z-index: 2;
width: 206px;
height: 30px;
float: left;
background: -webkit-linear-gradient(rgba(255, 255, 255, 2), rgba(255, 255, 255, 0))
}
div.gradientBottom {
position: absolute;
margin-bottom: 5px;
z-index: 2;
width: 206px;
height: 120px;
float: left;
bottom: -210px;
background: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1))
}
div.float {
border-right: 1px solid orange;
position: absolute;
z-index: 2;
margin-left: 5px;
margin-top: 5px;
float: left;
width: 200px;
}
div.mask {
position: relative;
z-index: 1;
margin-top: 5px;
float: left;
width: 206px;
height: 805px;
background-color: white;
}
img.left {
z-index: inherit;
margin-bottom: 3px;
float: left;
width: 200px;
min-height: 200px;
/* for modern browsers */
height: auto !important;
/* for modern browsers */
height: 200px;
/* for IE5.x and IE6 */
opacity: 0.4;
filter: alpha(opacity=40)
}
img.left:hover + #album1 {
opacity: .4;
}
img.left:hover {
opacity: 1.0;
}
#album1 {
z-index: 2;
width: 200px;
color: white;
text-align: center;
position: absolute;
background: orange;
top: 70px;
}
回答by David says reinstate Monica
The only way to do this with CSS is if the element to affect is either a descendent or an adjacent sibling.
使用 CSS 做到这一点的唯一方法是，要影响的元素是后代元素还是相邻的兄弟元素。
In the case of a descendent:
如果是后代：
#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
opacity: 0.3;
}
Which will apply to elements such as:
这将适用于以下元素：
<div id="parent_element">
<div id="child_element">Content</div>
</div>
For adjacent siblings:
对于相邻的兄弟姐妹：
#first_sibling:hover + #second_sibling {
opacity: 0.3;
}
Which works for mark-up such as:
这适用于标记，例如：
<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>
In both cases the latter element in the selector is the one chosen.
在这两种情况下，选择器中的后一个元素是被选中的元素。
Given your pseudo-code example, you probably want something like:
鉴于您的伪代码示例，您可能需要以下内容：
img:hover + img {
opacity: 0.3;
color: red;
}
回答by zzzzBov
I know you're probably looking for a pure-css way of doing what you want, but I'd suggest you use HTML+CSS+JS as the wonderful MVC structure that they are.
我知道您可能正在寻找一种纯 css 方式来做您想做的事，但我建议您使用 HTML+CSS+JS 作为它们的精彩 MVC 结构。
- HTML is your Model, containing your data
- CSS is your View, defining how the page should look
- JS is your Controller, controlling how the model and view interact.
- HTML 是您的模型，包含您的数据
- CSS 是您的视图，定义页面的外观
- JS 是你的控制器，控制模型和视图的交互方式。
It's the controlling aspect that should be taken advantage of here. You want to controla view of an item on a user interaction. That's exactlywhat JS is meant for.
这是应该利用的控制方面。您想在用户交互中控制项目的视图。这正是JS 的意义所在。
With very minimal JavaScript, you could toggle a class on and off of #thisElementwhen the imgis hovered over. It certainly beats playing CSS selector games, although I'd understand if you're only willing to accept a pure-css answer.
使用非常少的 JavaScript，您可以#thisElement在将img鼠标悬停在上时打开和关闭类。它当然胜过玩 CSS 选择器游戏，尽管我会理解您是否只愿意接受纯 css 答案。
