将鼠标悬停在一个div上时,更改其他div的类 [英] Change class of other div when hovering on one div
问题描述
我有四个 div
。当我悬停一个 div
时,其 height
和 width
与动画。我想要的东西,当我悬停在一个 div
它的大小增加和其他3 div
大小正在减少。 >
我完成,直到增加 div
的大小悬停我不明白如何更改所有其他 div
。
这是我的HTML和CSS。
.style_prevu_kit {display:inline-block; border:0; width:196px; height:210px;位置:相对; -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);过渡:全部200ms缓入;变换: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);过渡:全部200ms缓入; transform:scale(1.5);}
< div align =center> < div style =width:1000px;> < div id =s1class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s3class =style_prevu_kit>< / div> < / div>< / div>
不需要Javascript / jQuery,你可以使用CSS。您可以利用:hover
CSS类。
- container的
:hover
来动画化(减小)元素的维度。例如:.container> div:hover〜div {
设置所有其他< div>
元素的样式 - You can use the container's
:hover
to animate(decrease) the dimension of the elements. Ex:.container>div:hover ~ div {
to set the styles of all the other<div>
elements than the hovered element - You can animate(increase) the dimensions of the element that is hovered
b b b b p>
.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);过渡:全部200ms缓入; transform:scale(.5);}。style_prevu_kit {display:inline-block; border:0; width:196px; height:210px;位置:相对; -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);过渡:全部200ms缓入;变换: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);过渡:全部200ms缓入; transform:scale(1.5);}
< div align =center> < div class =container> < div id =s1class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s3class =style_prevu_kit>< / div> < / div>< / div>
更新
因为,当两个元素之间悬停所有元素都合同时,有一些问题,最好使用Javascript。
您可以使用 siblings() / code>选择当前元素的所有同级元素。
$('container .style_prevu_kit')。hover function(){$(this).siblings('。style_prevu_kit')。addClass('animate');},function(){$(this).siblings('。style_prevu_kit')。 });
.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);过渡:全部200ms缓入; transform:scale(.5);}。style_prevu_kit {display:inline-block; border:0; width:196px; height:210px;位置:相对; -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);过渡:全部200ms缓入;变换: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);过渡:全部200ms缓入; 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 =s1class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s3class =style_prevu_kit>< / div> < / div>< / div>
I have four div
s. When I hover one div
, its height
and width
increase with animation. I want something like when I hover on one div
its size increases and other 3 div
sizes are decreasing.
I am done till increase size of div
on hover I don't understand how to change size of all other div
s at one time.
Here is my HTML and 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>
anyone please helpme
解决方案 No need of Javascript/jQuery, you can do this using CSS only. You can take advantage of :hover
class of CSS.
.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>
Update
Because, there are some issues when hovering between the two elements all the elements are contracted, it's better to use Javascript. No need of Javascript/jQuery, I'm taking back my words.
You can use siblings()
to select all the sibling elements of the current elements.
$('.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>
这篇关于将鼠标悬停在一个div上时,更改其他div的类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!