在悬停时耗尽其他潜水器

Question

我有两张图片，它们在悬停时显示了一个标题，看起来像小提琴一样工作得很好。

我试图实现的是，当我将鼠标悬停在图像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;
}

查看更新的fiddle

Answer 2

演示-http://jsfiddle.net/victor_007/ym7uq7zw/2/

$(".box").hover( 
function (e) {
    $('.box').not(this).addClass('grey');
}, // over
function (e) {
    $('.box').removeClass('grey');
} // out
);

Answer 3

您应该添加此-

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

#mainwrapper:hover .box {
    background:#333;
}
#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;
}

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