有什么办法可以将鼠标hover在一个元素上并影响不同的元素？
我希望它是这样简单，但我知道它不是：
img { opacity: 0.4; filter: alpha(opacity=40); } img:hover { #thisElement { opacity: 0.3; filter: alpha(opacity=30); } opacity:1; filter:alpha(opacity=100); } 所以当你将鼠标hover在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; }
用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>
在这两种情况下，select器中的后一个元素是所选的一个。
鉴于你的伪代码示例，你可能需要像这样的东西：
img:hover + img { opacity: 0.3; color: red; }
JS小提琴演示 。
我知道你可能正在寻找一种纯CSS的方式来做你想做的事情，但我build议你使用HTML + CSS + JS作为他们的精彩MVC结构。
- HTML是你的模型，包含你的数据
- CSS是你的View，定义页面的外观
- JS是你的控制器，控制模型和视图如何交互。
这是应该利用这里的控制方面。 您想要控制用户交互项目的视图。 这正是 JS的意思。
使用非常小的JavaScript，可以在imghover时在#thisElement上打开和closures类。 它肯定会击败CSSselect器游戏，但我会理解，如果你只愿意接受一个纯CSS的答案。
