jquery - 悬停时使其他 div 变灰

Question

我有两张图像，它们在悬停时显示标题，并且按照 fiddle 似乎工作得很好。 .

我想要实现的是，当我将鼠标悬停在图像 1 上时，它应该显示标题，但同时它应该使容器 div 中的其他 div 变灰(即使另一个 div 变灰)。

HTML:

<div id="mainwrapper">
<!-- Image Caption 3 -->
<div id="box-3" class="box">
    <img id="image-3" src="css3-image-captions/3.jpg" /> <span class="caption fade-caption">  
    <h3>Fade Caption</h3>  
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
    </span> 
</div>
<!-- Image Caption 3 -->
<div id="box-3" class="box">
    <img id="image-3" src="css3-image-captions/3.jpg" /> <span class="caption fade-caption">  
    <h3>Fade Caption</h3>  
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>  
    </span> 
</div>
</div>
</div>
<!-- end of #mainwrapper-->

CSS:

#mainwrapper .box {
border: 5px solid #fff;
cursor: pointer;
height: 182px;
float: left;
margin: 5px;
position: relative;
overflow: hidden;
width: 200px;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
-moz-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 1px 1px 1px #ccc;
}
#mainwrapper .box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
/* Caption Common Style */
#mainwrapper .box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
/** Caption 3: Fade **/
#mainwrapper .box .fade-caption, #mainwrapper .box .scale-caption {
opacity: 0;
width: 170px;
height: 170px;
text-align: left;
padding: 15px;
}
/** Fade Caption :hover Behaviour **/
#mainwrapper .box:hover .fade-caption, #mainwrapper .box:hover .scale-caption {
opacity: 1;
}

无论如何我可以做到这一点吗？

Answer 1

以下是执行此操作的一种方法:

#mainwrapper:hover .box {
    background:#ccc;
}

See updated fiddle.