Вычеркнуть другие divs на hover

Question

У меня есть два изображения, которые показывают подпись при наведении и, похоже, работают нормально в соответствии с fiddle.

То, что я пытаюсь достичь, - это когда я наводил на изображение 1, он должен заголовок, но в то же время он должен был серировать другие divs в контейнере 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

демо - http://jsfiddle.net/victor_007/ym7uq7zw/2/

$(".box").hover( 
function (e) { 
    $('.box').not(this).addClass('grey'); 

}, // over 
function (e) { 
    $('.box').removeClass('grey'); 
} // out 
); 

Answer 2

Ниже один из способов сделать это:

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

See updated fiddle.

Answer 3

Вы должны добавить this-

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