分享几款非常好看的鼠标悬停样式

278 阅读 0 评论 184 点赞

我是靠谱客的博主飘逸西装，这篇文章主要介绍分享几款非常好看的鼠标悬停样式，现在分享给大家，希望可以做个参考。

前言：

当我们需要为鼠标悬停添加一个样式，都会使用hover伪类，通过它我们可以在鼠标移动到元素上时向此元素添加特殊的样式。比如一个普通的URL，当我们将鼠标移动到URL链接上，它会变色。

一、概述

在现实的应用场景也非常之多。最常见的是网站的悬浮导航，当鼠标放到导航条上时，会出现颜色变化或者元素自动伸出菜单栏。

实例1：鼠标hover时，将内容框起来

复制代码<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>    
    <style>        
    .ele:hover {            
    border:1px solid red;        
    }        
    .ele {    
    #去掉边框闪烁问题。（因为边框1像素会导致闪烁，所以先用1px透明色占住位置，hover时再让其变红，就不会觉得有闪烁了）            
    border:1px solid transparent;        
    }    
    </style>
    </head><body>    
    <div class="ele">        
    <div>222</div>        
    <div class="ele-item">111</div>    
    </div>
    </body>
    </html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>    
    <style>        
    .ele:hover {            
    border:1px solid red;        
    }        
    .ele {    
    #去掉边框闪烁问题。（因为边框1像素会导致闪烁，所以先用1px透明色占住位置，hover时再让其变红，就不会觉得有闪烁了）            
    border:1px solid transparent;        
    }    
    </style>
    </head><body>    
    <div class="ele">        
    <div>222</div>        
    <div class="ele-item">111</div>    
    </div>
    </body>
    </html>
登录后复制

原始效果：

鼠标悬停后：

实例2：尾品会vdangdang.com首页最下面有这样的图片

原始网页：

鼠标悬停后效果：

其实这个主要就是用hover制作而成。下面说一下具体实现：

实现思路：

1、新建一个div1
2、新建一个div2，把底部图片放入div2
3、再新建一个div3，悬浮内容放入div3

HTML代码：

复制代码<div class="touch">
        <div><img src="3.png"></div>
        <div class="content">
            <p><h5>品牌故事</h5></p>
            <p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。</h6></p>
            <input class="inpt" type="text" name="tel" id="tel"/>
            <button class="btn">开售提醒</button>
        </div>
   </div>1
2
3
4
5
6
7
8
9
<div class="touch">
        <div><img src="3.png"></div>
        <div class="content">
            <p><h5>品牌故事</h5></p>
            <p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。</h6></p>
            <input class="inpt" type="text" name="tel" id="tel"/>
            <button class="btn">开售提醒</button>
        </div>
   </div>
登录后复制

（学习视频分享：css视频教程）

CSS代码：

1、定义div1高度和宽度，class为touch，overflow设置为hidden，图片超过定义的高度和宽度会隐藏。

复制代码.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}1
2
3
4
5
6
.touch {
height:200px;
width:400px;
overflow:hidden;
position:relative;
}
登录后复制

2、div2为content，内容必须填满div1，所以设置上下左右都为0.且设置字体大小、颜色、对齐方式。

首先设置div2为不可见，即在鼠标hover之前内容默认是隐藏的，当鼠标悬浮后，再放出来。

复制代码.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
}1
2
3
4
5
6
7
8
9
10
11
12
.touch .content {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
font-size:20px;
background-color:black;
color:white;
text-align:center;
visibility:hidden;
}
登录后复制

3、设置鼠标悬浮时样式。内容放出来，且设置背景图片透明度为0.5，可以被看到。

复制代码.touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}1
2
3
4
5
.touch:hover .content{
visibility:visible;
border:4px solid red;
background-color:rgba(0,0,0,0.5)
}
登录后复制

4、最后设置input框和button

复制代码.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
.touch .content .btn{
background-color:#e83375;
color:white;
cursor: pointer;
border: none;
width: 70px;
height: 22px;
}
.touch .content .inpt{
height: 18px;
border: none
line-height: 18px;
font-size: 12px;
}
登录后复制

整体html代码：

复制代码<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style>        
.touch {            
height:200px;            
width:400px;            
overflow:hidden;            
position:relative;        
}        
.touch .content {            
top:0;            
left:0;            
right:0;            
bottom:0;            
position:absolute;            
font-size:20px;            
background-color:black;            
color:white;            
text-align:center;            
visibility:hidden;        
}        
.touch:hover .content{            
visibility:visible;            
border:4px solid red;            
background-color:rgba(0,0,0,0.5)        
}       
.touch .content .btn{            
background-color:#e83375;            
color:white;            
cursor: pointer;            
border: none;            
width: 70px;            
height: 22px;            
}         
.touch .content .inpt{            
height: 18px;            
border: none            
line-height: 18px;            
font-size: 12px;         
}     
</style>
</head>
<body>    
<div class="touch">        
<div><img src="3.png">
</div>        
<div class="content">            
<p><h5>品牌故事</h5></p>            
<p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。 </h6></p>            
<input class="inpt" type="text" name="tel" value="请输入手机号码或邮箱地址" id="tel"/>            
<button class="btn">开售提醒</button>        
</div>    
</div>
</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<style>        
.touch {            
height:200px;            
width:400px;            
overflow:hidden;            
position:relative;        
}        
.touch .content {            
top:0;            
left:0;            
right:0;            
bottom:0;            
position:absolute;            
font-size:20px;            
background-color:black;            
color:white;            
text-align:center;            
visibility:hidden;        
}        
.touch:hover .content{            
visibility:visible;            
border:4px solid red;            
background-color:rgba(0,0,0,0.5)        
}       
.touch .content .btn{            
background-color:#e83375;            
color:white;            
cursor: pointer;            
border: none;            
width: 70px;            
height: 22px;            
}         
.touch .content .inpt{            
height: 18px;            
border: none            
line-height: 18px;            
font-size: 12px;         
}     
</style>
</head>
<body>    
<div class="touch">        
<div><img src="3.png">
</div>        
<div class="content">            
<p><h5>品牌故事</h5></p>            
<p><h6>我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。 </h6></p>            
<input class="inpt" type="text" name="tel" value="请输入手机号码或邮箱地址" id="tel"/>            
<button class="btn">开售提醒</button>        
</div>    
</div>
</body>
</html>
登录后复制