首先,很抱歉,如果这个问题已经回答,但我找不到任何地方。
将鼠标悬停在div上时,我试图获得一个平滑的过渡。在该div的顶部是另一个div,在悬停时可以看到。过渡似乎并没有解决问题,那么我该如何实现呢? (用jQuery代替CSS或其他/更好的代码?)
也许还有另一种方法,希望你们能帮助我。
HTML:
<ul>
<li>
<div class="hover">
<a href="#">
<p>Test</p>
</a>
</div>
<img src="#" alt="img" />
<div class="text">
<p>Test</p>
</div>
</li>
</ul>
CSS:
body { background-color: #eee;
}
ul { margin: 0;
padding: 0;
list-style: none;}
ul li { width: 30.33%;
height: auto;
margin-right: 3%;
padding: 5px;
background-color: #fff;
float: left;
position: relative;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}
ul li img { width: 100%;
max-height: 100%;
z-index: 1;
background-color: #ddd;
border: 0;}
.text { width: 100%;
padding-top: 7%;}
.text p { margin: 0 10px;
padding-bottom: 7%;}
.hover { height: 100%;
background-color: #333;
position: absolute;
top: 0;
left: 0;
right: 0;
display: none;}
.hover a { width:100%;
height: 100%;
margin: 0;
padding: 25px;
display: block;
color: #fff;
text-decoration: none;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;}
ul li:hover > .hover { display: block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;}
这是代码:http://jsfiddle.net/HAFEx/
提前致谢!
最佳答案
display:block不受过渡影响。
而是使用不透明度。
.hover { height: 100%;
background-color: #333;
position: absolute;
top: 0;
left: 0;
right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
opacity:0;
}
ul li:hover > .hover{
display: block;
opacity:1;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
}
http://jsfiddle.net/Rjq3y/
关于css - 将鼠标悬停在底层div上时激活div-CSS过渡不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25021296/