纯CSS实现鼠标移入显示图标效果

淩亂°似流年 2022-03-07 07:10 844阅读 0赞

## 1、效果预览 ##

在淘宝或京东商城我们经常看到这样的效果：鼠标移动除某一个位置时出现下拉菜单，或者显示一个图标，那么这是如何实现的呢？我们今天就用CSS来实现鼠标移入时显示图标的一个效果。  
![在这里插入图片描述][20190316132451262.gif]  
下面是我们这次最终要实现的效果  
![在这里插入图片描述][20190316133039885.gif]  
或者这样  
![在这里插入图片描述][2019031613310583.gif]

## 2、代码实现 ##

**1、标签布局**

<!doctype html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    
    </head>
    <body>
    	<div>
    		<ul>
    			<li>
    				<a href="#">阿里
    					<span>
    						<img src="./image/ali.png" alt="">
    					</span>
    				</a>
    			</li>
    			
    			<li>
    				<a href="#">腾讯
    					<span>
    						<img src="./image/tencent.png" alt="">
    					</span>
    				</a>
    			</li>
    
    			<li>
    				<a href="#">百度
    					<span>
    						<img src="./image/baidu.png" alt="">
    					</span>
    				</a>
    			</li>
    		</ul>
    	</div>
    </body>
    </html>

在浏览器中显示效果为：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]  
**2、加入样式**

（1）为标签添加`class`属性

3、加入样式

* { 
    			padding:0px;
    			margin:0px;
    		}
    		.contain { 
    			border:1px solid red;
    			width:900px;
    			margin:0px auto;
    		}
    		li{ 
    			list-style:none;
    		}
    		.nav{ 
    			width:200px;
    
    		}
    		.nav li a{ 
    			border:1px solid red;
    		}
    		
    		.link { 
    			display:block;
    			text-decoration:none; 
    			color:#000;
    			text-align:center;
    			padding:30px 0px;
    		}

此时在浏览器中显示为静态，鼠标移入不出现任何效果：  
![在这里插入图片描述][20190316134532304.gif]  
4、效果实现：

我们只需在上面的样式中加入下面的代码即可

.link .img{ 
    			display:none;
    		}
    		.link:hover .img{ 
    			display:inline;
    		}

此时在浏览器中显示的效果为：  
![在这里插入图片描述][20190316134813276.gif]  
如果想要鼠标移入时列表“不颤动”，只需要在上面的样式中加入一行控制高度的代码即可：

.nav li a{ 
    			border:1px solid red;
    			height:60px;	//此为新加入的样式，用于控制高度
    		}

此时在浏览器中的显示效果就不会有“颤动”了：  
![在这里插入图片描述][20190316135203422.gif]  
这样我们就最终实现了鼠标移入时显示图标的效果。同样，如果想要实现鼠标移入时隐藏，也是同样的道理。

（在这里必须要说明的是上面的“布局”和为标签加入`class`分开是为了方便说明，实际开发中是同时进行的，在布局时同时定义好标签的`class`）

[20190316132451262.gif]: /images/20220307/d02d6e6183bb4785b25855a235328f16.png
[20190316133039885.gif]: /images/20220307/5bc7172408504e9e8eb1764212b3d741.png
[2019031613310583.gif]: /images/20220307/38b990884e0f4728a859ec93afdc8b33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: /images/20220307/0c61a177c2c64ad1b3255a0eeb121dd8.png
[20190316134532304.gif]: /images/20220307/9c37b2749d924276b9dec2fa8a1680a7.png
[20190316134813276.gif]: /images/20220307/c7d7460c8a7f4e6fb5df249dfd275a45.png
[20190316135203422.gif]: /images/20220307/de33baa856a6454787c69eb0f8c8d0cd.png