Css 有没有办法悬停在一个元素上并影响另一个元素？_Css_Image_Hover_Opacity

Css 有没有办法悬停在一个元素上并影响另一个元素？

css image

Css 有没有办法悬停在一个元素上并影响另一个元素？,css,image,hover,opacity,Css,Image,Hover,Opacity,我希望它像这样简单，但我知道它不是： 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上时，它会将#this元素的不透明度更改为30%，并将图像的不透明度更改

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

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上时，它会将#this元素的不透明度更改为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实现这一点的唯一方法是如果要影响的元素是后代或相邻的兄弟

如果是后代：

#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>

适用于加价，例如：

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

我知道您可能正在寻找一种纯粹的css方式来做您想要的事情，但我建议您使用HTML+css+JS作为出色的MVC结构

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

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

使用非常少的JavaScript，当

img

悬停在上方时，可以打开和关闭

#thismelement

类。这当然比玩CSS选择器游戏要好，尽管我知道你是否只愿意接受一个纯CSS的答案。

我试过这样的方法：img.left:hover+#album1{opacity:.4；}img.left:hover{opacity:1.0；}，而#album1是img元素上方显示的div元素。它没有达到预期的效果，继续像以前一样发挥作用。你推荐什么？我强烈建议编辑你的问题（点击“编辑”链接），并在问题中添加页面相关部分的html标记。这样我就能知道问题出在哪里了。值得注意的是，

（相邻同级选择器）只能用于选择一个元素（

#第二同级

），该元素出现在编辑的

#第一同级

之后的标记中。以及相关的代码（全部，因为我刚刚为它创建了一个单独的文档）。当我改变订单的时候，工作得很有魅力……你有没有解决定位问题的办法？div id=“album1”需要垂直地以它的兄弟姐妹为中心…我是手动这样做的…但这需要为所有兄弟姐妹都这样做。还显示了常规同级选择器。使用flexbox，您可以悬停其他元素，即使它们（看起来）在DOM中放置在悬停的元素之前。看我的。不，我同意你的看法，在这种情况下js可能会更好，但唯一的问题是…我不知道js。我目前正在学习jquery，我想在几天内给一些投资者展示一个工作页面。MVC结构对于这一点来说有些过火，有点离题：）相关：

#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;
}