怎样给hover的display加上渐变效果？
0
[已解决问题]
解决于 2016-10-19 16:19
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.a{
width: 30%;
height: 20%;
border: 1px solid;
}
.b{
width: 100%;
height: 100%;
position: relative;
}
.b img{
width: 100%;
height: 100%;
}
.c{
width: 100%;
height: 100%;
background-color: gray;
opacity: 0.5;
text-align: center;
position: absolute;
top: 0;
display: none;
}
.c p{
margin-top: 15%;
}
.a:hover .c{
/*width: 200%;*/
transition: 2s linear;
display: block;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<img src="img/1-160R92040440-L.jpg">
<div class="c">
<p>汇通天下G7</p>
<p>汇通天下G7品牌视频</p>
</div>
</div>
<div style="text-align: center;">汇通天下G7</div>
</div>
</body>
</html>
试过把hover属性边成调整宽高，transition有效，但对display无效，求高手解答。
最佳答案
1
transition属性是为了css为了实现平滑的过度效果，display属性是不支持的，你可以参考这篇文章
http://weizuqing1986-126-com.iteye.com/blog/1878986
不过也不是不可以实现，一种是通过js脚本控制，比如jquery的toggle就可以实现，这里不做介绍；
第二种方式，是通过设置visibility和opacity，以及对height和width的宽高控制来实现，如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #first { visibility: hidden; opacity: 0; transition: 2s linear; height: 0px; width: 0px; background-color: #789; } #father:hover>#first { visibility: visible; height: 100px; width: 100px; opacity: 1; } #second { height: 100px; width: 100px; background-color: #efefef; } </style> </head> <body> <div id="father"> <div id="first"></div> <div id="second"></div> </div> </body> </html>
这个列子就实现了你想要的效果。
奖励园豆：5
其他回答(1)
0
display只是显示方式而已，何来的渐变效果啊
