CSS——解决hover离开时效果突然消失的问题
2017-11-10 11:53
555 查看
参考代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单解决</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
/* 在原本元素上再加一个transition 重点:在原本元素上加!!!!*/
transition: all 1s linear;
}
p:hover{
transform: scale(1.1);
transition: all 1s linear;
}
</style>
</head>
<body>
<p></p>
</body>
</html>参考链接:http://www.php.cn/css-tutorial-376633.html
自己模仿实现的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1 {
width: 300px;
height: 200px;
overflow: hidden;
}
.img1 {
transition: all .6s linear;
}
.img1:hover {
transition: all .6s linear;
transform: scale(1.1);
}
</style>
</head>
<body>
<div id="d1">
<a href="">
<img src="img/home1/3_1.jpg" class="img1" alt="">
</a>
</div>
</body>
</html>关键点:在hover的元素上再加一个transition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>简单解决</title>
<style type="text/css">
p{
width: 100px;
height: 100px;
border:1px solid;
margin:0px auto;
margin-top: 200px;
/* 在原本元素上再加一个transition 重点:在原本元素上加!!!!*/
transition: all 1s linear;
}
p:hover{
transform: scale(1.1);
transition: all 1s linear;
}
</style>
</head>
<body>
<p></p>
</body>
</html>参考链接:http://www.php.cn/css-tutorial-376633.html
自己模仿实现的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#d1 {
width: 300px;
height: 200px;
overflow: hidden;
}
.img1 {
transition: all .6s linear;
}
.img1:hover {
transition: all .6s linear;
transform: scale(1.1);
}
</style>
</head>
<body>
<div id="d1">
<a href="">
<img src="img/home1/3_1.jpg" class="img1" alt="">
</a>
</div>
</body>
</html>关键点:在hover的元素上再加一个transition
相关文章推荐
- 关于Cocos2d-x中使用完Blink动作后精灵突然消失的问题的解决
- CSS常见问题及解决(二)在active状态下屏蔽掉css中的hover效果
- csshover.htc可以解决ie6下hover不起作用等兼容问题
- csshover.htc 以及简单使用方法(解决IE6下 :hover 在其他标签下无效问题)
- 解决IE6,IE7 CSS效果不一致的问题
- 解决css中hover做遮盖罩闪动问题
- 纯css解决div隐藏浏览器原生滚动条,但保留鼠标滚动效果的问题
- 解决IE6下的CSS Hover背景图片闪烁问题
- 解决IE使用css表达式模拟fixed效果时抖动问题
- 解决CSS、JS文件更新网站效果却没实时更新的问题
- csshover.htc解决IE6 hover兼容问题
- 解决 Button 设置 background 之后点击动画效果消失的问题
- 解决vtkWindowForm控件突然消失问题:动态加载vtkWindowForm
- js生效后页面自动刷新的问题(js控制button,生效效果闪一下消失)解决
- ubuntu 3d桌面效果重启消失的问题解决
- html + css 在设置了 z-index 属性后没效果的问题解决办法
- 解决myeclipse中SVN插件突然消失的问题
- 解决RD2作业在IE和Fire Fox中CSS效果不同的问题~
- 【问题解决】STS突然无法使用,双击exe文件无反应
- Local Response Normalization作用——感觉LRN也是解决的梯度消失和爆炸问题,统计机器学习中的一个经典假设是“源空间(source domain)和目标空间(target domain)的数据分布(distribution)是一致的