有没有办法将鼠标悬停在一个元素上并影响另一个元素？ [复制]答案

【问题标题】：Is there any way to hover over one element and affect a different element? [duplicate]有没有办法将鼠标悬停在一个元素上并影响另一个元素？ [复制]
【发布时间】：2011-10-15 14:03:39
【问题描述】：

我希望它像这样简单，但我知道它不是：

img {
  opacity: 0.4;
  filter: alpha(opacity=40);
}

img:hover {
  #thisElement {
    opacity: 0.3;
    filter: alpha(opacity=30);
  }
  opacity:1;
  filter:alpha(opacity=100);
}

因此，当您将鼠标悬停在 img 上时，它会将 #thisElement 的不透明度更改为 30%，并将图像的不透明度更改为 100%。有没有办法只使用 css 来做到这一点？

这就是 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>

这是 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;
}

【问题讨论】：

相关：stackoverflow.com/questions/1462360/…

标签： css image hover opacity

【解决方案1】：

使用 CSS 执行此操作的唯一方法是，如果要影响的元素是后代元素或相邻的兄弟元素。

在后代的情况下：

#parent_element:hover #child_element, /* or */
#parent_element:hover > #child_element {
    opacity: 0.3;
}

这将适用于以下元素：

<div id="parent_element">
    <div id="child_element">Content</div>
</div>

对于相邻的兄弟姐妹：

#first_sibling:hover + #second_sibling {
    opacity: 0.3;
}

这适用于标记，例如：

<div id="first_sibling">Some content in the first sibling</div> <div id="second_sibling">and now in the second</div>

在这两种情况下，选择器中的后一个元素都是被选择的。

鉴于您的伪代码示例，您可能想要这样的东西：

img:hover + img {
    opacity: 0.3;
    color: red;
}

JS Fiddle demo.

【讨论】：

我试过这样：img.left:hover + #album1{ opacity:.4; } img.left：悬停{不透明度：1.0；而#album1 是显示在img 元素上方的div 元素。它没有达到预期的效果，并继续像以前一样发挥作用。你有什么推荐的？
我强烈建议您编辑您的问题（点击“编辑”链接）并将页面相关部分的 html 标记添加到您的问题中。这样我就可以看到问题可能是什么。值得注意的是，+（相邻兄弟选择器）只能用于选择出现在标记 @ 之后的元素 (#second_sibling) 987654331@.
已编辑。并使用相关代码（所有这些，因为我刚刚为它创建了一个单独的文档）。当我更改订单时，它就像一个魅力......你有解决定位问题的方法吗？ div id="album1" 需要垂直居中在它的兄弟姐妹上......我手动完成了......但这需要为所有这些完成。
On a CSS hover event, can I change another div's styling? 也显示了一般同级选择器。
使用 flexbox，您可以悬停其他元素，即使它们（似乎）被放置在 DOM 中的悬停元素之前之前。见我的pure-CSS rating widget。

【解决方案2】：

我知道您可能正在寻找一种纯 css 方式来做您想做的事，但我建议您使用 HTML+CSS+JS 作为它们的美妙 MVC 结构。

HTML 是您的模型，包含您的数据
CSS 是您的视图，定义页面的外观
JS 是您的控制器，控制模型和视图的交互方式。

这里应该利用控制方面。您希望在用户交互中控制项目的视图。这正是 JS 的意义所在。

使用极少的 JavaScript，您可以在 img 悬停时打开和关闭 #thisElement 的类。它肯定比玩 CSS 选择器游戏要好，不过如果你只愿意接受纯 CSS 的答案，我会理解的。

【讨论】：

不，我同意你的观点，在这种情况下 js 可能会更好，但唯一的问题......我不知道 js。我目前正在学习 jquery，我想要一个工作页面在几天内向一些投资者展示。
为此的 MVC 结构有点矫枉过正，有点离题:)