首页 新闻 搜索 专区 学院

怎样给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无效,求高手解答。

sahk的主页 sahk | 初学一级 | 园豆:110
提问于:2016-10-17 17:28
< >
分享
最佳答案
0

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
TeaCat | 菜鸟二级 |园豆:301 | 2016-10-18 13:39
其他回答(1)
0

display只是显示方式而已,何来的渐变效果啊

有缘无分的朋友 | 园豆:172 (初学一级) | 2016-10-18 10:01
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册