更改其他div的類別時懸停在一個div

Question

我有四個div s。當我徘徊一個div時，其height和width隨動畫增加。我想要的東西就像當我徘徊在一個div其大小增加和其他3 div大小正在減少。

我已完成，直到增加大小div懸停我不明白如何一次更改所有其他div s的大小。

這是我的HTML和CSS。

.style_prevu_kit { 
 
    display: inline-block; 
 
    border: 0; 
 
    width: 196px; 
 
    height: 210px; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    background-color: #00a096; 
 
} 
 
.style_prevu_kit:hover { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
}

<div align="center"> 
 
    <div style="width:1000px;"> 
 
    <div id="s1" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s3" class="style_prevu_kit"></div> 
 
    </div> 
 
</div>

請人helpme

Answer 1

不需要JavaScript/jQuery，只能使用CSS來完成此操作。您可以利用:hover類的CSS。

1. 您可以使用容器的:hover來動畫（減小）元素的尺寸。例如：.container>div:hover ~ div {設置樣式都比懸停元素
2. 您可以動畫（增加）是徘徊元素的尺寸其他<div>元素

.container { 
 
    width: 1000px; 
 
} 
 
.container:hover div:not(:hover) { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(.5); 
 
} 
 
.style_prevu_kit { 
 
    display: inline-block; 
 
    border: 0; 
 
    width: 196px; 
 
    height: 210px; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    background-color: #00a096; 
 
} 
 
.container .style_prevu_kit:hover { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
}

<div align="center"> 
 
    <div class="container"> 
 
    <div id="s1" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s3" class="style_prevu_kit"></div> 
 
    </div> 
 
</div>

更新

因爲，在兩個元素之間懸停時存在一些問題所有的元素都收縮了，最好使用Javascript。 不需要Javascript/jQuery，我收回我的話。

您可以使用siblings()來選擇當前元素的所有同級元素。

$('.container .style_prevu_kit').hover(function() { 
 
    $(this).siblings('.style_prevu_kit').addClass('animate'); 
 
}, function() { 
 
    $(this).siblings('.style_prevu_kit').removeClass('animate'); 
 
});

.container { 
 
    width: 1000px; 
 
} 
 
div.animate { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(.5); 
 
} 
 
.style_prevu_kit { 
 
    display: inline-block; 
 
    border: 0; 
 
    width: 196px; 
 
    height: 210px; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    background-color: #00a096; 
 
} 
 
.container .style_prevu_kit:hover { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<div align="center"> 
 
    <div class="container"> 
 
    <div id="s1" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s3" class="style_prevu_kit"></div> 
 
    </div> 
 
</div>

Answer 2

既然你已經標記使用jQuery，你可以這樣做一個類添加到當一個項目懸停在所有兄弟元素，那麼你可以添加CSS規則的那類具有較小視圖

jQuery(function($) { 
 
    $('.style_prevu_kit').hover(function(e) { 
 
    $(this).siblings().toggleClass('small', e.type == 'mouseenter') 
 
    }) 
 
})

.style_prevu_kit { 
 
    display: inline-block; 
 
    border: 0; 
 
    width: 196px; 
 
    height: 210px; 
 
    position: relative; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1); 
 
    background-color: #00a096; 
 
} 
 
.style_prevu_kit:hover { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(1.5); 
 
} 
 
.style_prevu_kit.small { 
 
    box-shadow: 0px 0px 150px #000000; 
 
    z-index: 2; 
 
    -webkit-transition: all 200ms ease-in; 
 
    -webkit-transform: scale(1.5); 
 
    -ms-transition: all 200ms ease-in; 
 
    -ms-transform: scale(1.5); 
 
    -moz-transition: all 200ms ease-in; 
 
    -moz-transform: scale(1.5); 
 
    transition: all 200ms ease-in; 
 
    transform: scale(.5); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div align="center"> 
 
    <div style="width:1000px;"> 
 
    <div id="s1" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s2" class="style_prevu_kit"></div> 
 
    <div id="s3" class="style_prevu_kit"></div> 
 
    </div> 
 
</div>

Answer 3

你可以使用CSS選擇器~但在接下來的兄弟姐妹這隻作品，而不是以前的。選擇以前的兄弟姐妹是不可能的。 http://jsfiddle.net/q041cwd8/

.style_prevu_kit:hover ~.style_prevu_kit { 
    box-shadow: 0px 0px 150px #000000; 
    z-index: 2; 
    -webkit-transition: all 200ms ease-in; 
    -webkit-transform: scale(0.5); 
    -ms-transition: all 200ms ease-in; 
    -ms-transform: scale(0.5); 
    -moz-transition: all 200ms ease-in; 
    -moz-transform: scale(0.5); 
    transition: all 200ms ease-in; 
    transform: scale(0.5); 
} 

Answer 4

，我認爲這是可以做到很多simpeler。如果你將鼠標懸停在其中一個方格上，那麼你也將鼠標懸停在容器上。你可以使用它。在下面的例子中我使用的顏色和字體大小，以保持例子有點不太複雜：

/* Default state */ 
 
#container .style_prevu_kit{ 
 
    opacity: 0.75; 
 
    background: orange; 
 
    display: inline-block; 
 
    width: 40%; 
 
    height: 50px; 
 
    vertical-align: top; 
 
    transition: opacity 0.5s, background 0.5s, font-size 0.5s; 
 
} 
 
/* The other not selected elements */ 
 
#container:hover .style_prevu_kit{ 
 
    opacity: 0.5; 
 
    background: blue; 
 
} 
 
/* The currect selected element */ 
 
#container .style_prevu_kit:hover{ 
 
    opacity: 1.0; 
 
    background: green; 
 
    font-size: 2em; 
 
}

<div align="center"> 
 
    <div id="container" style="width:100%;"> 
 
    <div id="s1" class="style_prevu_kit">s1</div> 
 
    <div id="s2" class="style_prevu_kit">s2</div> 
 
    <div id="s2" class="style_prevu_kit">s3</div> 
 
    <div id="s3" class="style_prevu_kit">s4</div> 
 
    </div> 
 
</div>