有没有办法将鼠标悬停在一个元素上并影响不同的元素？

我想它是如此简单，但我知道这是不是：有没有办法将鼠标悬停在一个元素上并影响不同的元素？

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

来源

2011-07-29 Marlon

相关：http://stackoverflow.com/questions/1462360/css-hover-one-element-effect-for-multiple-elements –

用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。

来源

2011-07-29 00:20:01

嘿谢谢！我会试一试！ – Marlon

我尝试了这样： img.left：悬停+＃album1 { 不透明度:.4; } img.left：hover { opacity：1.0; } ＃album1是img元素上方显示的div元素。它没有达到预期的效果，并继续像以前一样运作。你有什么建议？ – Marlon

我强烈建议编辑您的问题（点击'编辑'链接），并将您网页相关部分的html标记添加到您的问题中。这样我可以看到问题可能是什么。值得注意的是，'+（邻接兄弟选择器）只能用于选择出现在***＃'first_sibling'之后的标记***中的元素（'＃second_sibling'）。 –

我知道你可能寻找做你想要的东西的纯CSS的方式，但我建议你使用HTML + CSS + JS的精彩MVC结构，他们是。

HTML是你的模型，包含数据
CSS您的看法，定义页面应该如何看
JS是你的控制，如何控制模型和视图交互。

它应该被利用这里的控制方面。您想要控制用户交互项目的视图。这是究竟是什么是JS的意思。

使用非常小的JavaScript，当img悬停时，您可以开启或关闭#thisElement类。它肯定会击败CSS选择器游戏，尽管我会理解你是否只愿意接受纯CSS的答案。

来源

2011-07-29 00:26:50 zzzzBov

不，我同意你在这种情况下js可能会更好，但唯一的问题是......我不知道js。我目前正在学习jquery，我想要一个工作页面在几天内向一些投资者演示。 – Marlon

这是一个MVC结构是矫枉过正和一种脱离主题:) –

有没有办法将鼠标悬停在一个元素上并影响不同的元素？

回答

相关问题