CSS——解决hover离开时效果突然消失的问题

最新推荐文章于 2024-07-29 23:44:34 发布

spfLinux

最新推荐文章于 2024-07-29 23:44:34 发布

阅读量1.8w

点赞数 10

分类专栏： css 文章标签： css hover

css 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

参考代码：

<!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