我正在开发一个简单的项目,其中单个块元素悬停将显示4x缩放元素。我是通过纯css和css3过渡完成的。请参阅jsfiddle演示。将有四个元素,每个元素都有不同的悬停元素。但是当我悬停在它上面时,只显示一个悬停元素,尽管它与该块或元素没有关联。
请参阅演示项目,然后一切都将清楚我想说的。
<style type="text/css">
.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;
}
</style>
<div class="main">
<a href="">
<img src="http://placehold.it/150x150">
<div class="child">
<h4>1Lorem 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>2Lorem 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>3Lorem 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>4Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h4>
</div>
</a>
</div>
重要提示:如果我使用display none或block in hover instate css3 transition,那么它工作正常,但我需要淡入淡出效果。
请帮帮我
答案 0 :(得分:2)
这里的问题是,当悬停在元素上时会显示四个.child元素,但只有最后一个.child可见,要解决此问题,请使用可见性属性 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>
答案 1 :(得分:0)
绝对元素与其父相对元素相关联,在演示中的演示中,您需要设置相对于标签的位置
.main a{
width: 50%;
height: 50%;
float:left;
position:relative;
}
答案 2 :(得分:0)
您可以尝试使用 ::before
<强> HTML 强>
<ul id="content-ul">
<li>
<a href="#" target="_blank" titulo="Lorem 1">
<img src="http://placehold.it/150x150" />
</a>
</li>
<li>
<a href="#" target="_blank" titulo="Lorem 2">
<img src="http://placehold.it/150x150" />
</a>
</li>
<li>
<a href="#" target="_blank" titulo="Lorem 3">
<img src="http://placehold.it/150x150" />
</a>
</li>
<li>
<a href="#" target="_blank" titulo="Lorem 4">
<img src="http://placehold.it/150x150" />
</a>
</li>
</ul>
<强> CSS:强>
#content-ul{
display: block;
width: 340px;
margin: auto;
overflow: hidden;
}
#content-ul li,#content-ul li a{
display: block;
position: relative;
width: 150px;
height: 150px;
float: left;
overflow: hidden;
}
#content-ul li{
margin: 10px 10px ;
}
#content-ul li a{
text-decoration: none;
color: #fff;
font-size: 14px;
text-shadow: 0 1px 0 #000;
font-weight: bold;
border-radius: 4px;
}
#content-ul li a img{
border-radius: 4px;
}
#content-ul li a:before{
visibility: hidden;
content: attr(titulo);
position: absolute;
line-height: 250px;
float: left;
width: 150px;
height: 150px;
background: rgba(0,0,50,.5);
border-radius: 4px;
overflow: hidden;
text-align: center;
font-size: 25px;
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;
}
#content-ul li a:hover::before{
-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;
visibility: visible;
}
<强> Working Demo 强>
这是基于您的代码的更新:
<强> HTML:强>
<div class="main">
<a href="" content="1Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
<img src="http://placehold.it/150x150">
</a>
<a href="" content="2Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
<img src="http://placehold.it/150x150">
</a>
<a href="" content="3Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
<img src="http://placehold.it/150x150">
</a>
<a href="" content="4Lorem Ipsum is simply dummy text of the printing and typesetting industry.">
<img src="http://placehold.it/150x150">
</a>
</div>
<强> CSS:强>
.main{
position: relative;
width: 300px;
overflow:hidden
}
.main a{
width: 50%;
height: 50%;
float:left;
}
.main a:before{
visibility: hidden;
content: attr(content);
position: absolute;
line-height: 250px;
float: left;
width: 150px;
height: 150px;
background: rgba(0,0,50,.5);
border-radius: 4px;
overflow: hidden;
text-align: center;
font-size: 25px;
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::before{
-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;
visibility: visible;
}
<强> Working Demo 强>