我正在做一个简单的元素,其中单个 block 元素悬停将显示 4 倍缩放元素。我是通过纯 css 和 css3 转换完成的。请参阅 jsfiddle 演示。将有四个元素,每个元素都有不同的悬停元素。但是当我将鼠标悬停在它上面时,尽管它与该 block 或元素没有关联,但只显示一个悬停元素。
查看演示以发表自己的意见。
.main {
position: relative;
width: 300px;
overflow: hidden
}
.main a {
width: 50%;
height: 50%;
float: left;
}
.main a .child {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background: gray;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.main a:hover .child {
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-ms-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in;
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}
<div class="main">
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>1.Text</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>2.Text</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>3.Text</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>4.Text</h4>
</div>
</a>
</div>
重要说明:如果我使用不显示或在悬停状态下阻止 css3 过渡,那么它工作正常,但我需要淡入淡出效果。
最佳答案
这里的问题是当悬停在元素上时显示四个 .child 元素,但只有最后一个 .child 是可见的,要解决此问题,请使用 visibility 属性而不是 display:
https://jsfiddle.net/f9m1mnce/
.main{
position: relative;
width: 300px;
overflow:hidden
}
.main a{
width: 50%;
height: 50%;
float:left;
}
.main a > .child{
position: absolute;
left:0;
right:0;
bottom:0;
top: 0;
visibility: hidden;
background: gray;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: opacity 0.5s ease-out;
-moz-transition: opacity 0.5s ease-out;
-ms-transition: opacity 0.5s ease-out;
-o-transition: opacity 0.5s ease-out;
transition: opacity 0.5s ease-out;
}
.main a:hover > .child{
-webkit-transition: opacity 0.2s ease-in .2;
-moz-transition: opacity 0.2s ease-in .2 ;
-ms-transition: opacity 0.2s ease-in .2;
-o-transition: opacity 0.2s ease-in .2;
transition: opacity 0.2s ease-in .2;
top: 0;
visibility: visible;
zoom: 1;
filter: alpha(opacity=100);
opacity: 1.0;
}
<div class="main">
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>1 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>2 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>3 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>4 Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
</div>
关于javascript - 元素悬停在 css3 淡入淡出效果中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30431297/