分享几款非常好看的鼠标悬停样式-css教程-PHP中文网

品牌故事

我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。

首页

web前端

css教程

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

王林

Mar 17, 2021 pm 02:06 PM

样式鼠标

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

前言：

当我们需要为鼠标悬停添加一个样式，都会使用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>

登录后复制

原始效果：

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

鼠标悬停后：

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

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

原始网页：

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

鼠标悬停后效果：

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

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

实现思路：

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

HTML代码：

<div class="touch">
        <div><img  src="/static/imghw/default1.png"  data-src="3.png"  class="lazy"   alt="分享几款非常好看的鼠标悬停样式" ></div>
        <div class="content">
            <p><h5 id="品牌故事">品牌故事</h5></p>
            <p><h6 id="我们的源泉不是时尚-不是潮流-而是由心而发的喜爱-将精致华丽的艺术融入东方式的低调-都只为了一个人而存在">我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。</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;
}

登录后复制

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;
}

登录后复制

3、设置鼠标悬浮时样式。内容放出来，且设置背景图片透明度为0.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;
}

登录后复制

整体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="/static/imghw/default1.png"  data-src="3.png"  class="lazy"   alt="分享几款非常好看的鼠标悬停样式" >
</div>        
<div class="content">            
<p><h5 id="品牌故事">品牌故事</h5></p>            
<p><h6 id="我们的源泉不是时尚-不是潮流-而是由心而发的喜爱-将精致华丽的艺术融入东方式的低调-都只为了一个人而存在-nbsp">我们的源泉不是时尚，不是潮流，而是由心而发的喜爱，将精致华丽的艺术融入东方式的低调，都只为了一个人而存在。 </h6></p>            
<input class="inpt" type="text" name="tel" value="请输入手机号码或邮箱地址" id="tel"/>            
<button class="btn">开售提醒</button>        
</div>    
</div>
</body>
</html>

登录后复制

关键知识点：

1、最外面的div设置成relative，把content设置absolute，然后top、bottom、left、right设置均为0，即把content铺满div；

2、visibility:hidden；默认隐藏最上面的内容；

3、visibility:visible和background-color:rgba(0,0,0,0.5)，hover时放出内容，并且设置背景透明度，可以看到背景图片；

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7530

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

Win11怎么禁用任务栏缩略图预览? 关闭鼠标移动任务栏图标显示缩略图技巧 Feb 29, 2024 pm 03:20 PM

本文将介绍如何在Win11系统中关闭鼠标移动任务栏图标时显示的缩略图功能。这一功能在默认情况下是开启的，当用户将鼠标指针悬停在任务栏上的应用程序图标上时，会显示该应用程序的当前窗口缩略图。然而，有些用户可能觉得这个功能不太实用或者会干扰到他们的使用体验，因此想要关闭它。任务栏缩略图可能很有趣，但它们也可能分散注意力或烦人。考虑到您将鼠标悬停在该区域的频率，您可能无意中关闭了重要窗口几次。另一个缺点是它使用更多的系统资源，因此，如果您一直在寻找一种提高资源效率的方法，我们将向您展示如何禁用它。不过

惠普推出 Professor 1 三模轻音鼠标：4000DPI、蓝影 RAW3220，首发价 99 元 Apr 01, 2024 am 09:11 AM

本站3月31日消息，惠普近日在京东上架了一款Professor1三模蓝牙鼠标，可选黑白奶茶色，首发价99元，需要支付10元定金。据介绍，这款鼠标重量106克，采用人体工程学设计，尺寸为127.02x79.59x51.15mm，可选七档4000DPI，搭载蓝影RAW3220传感器，使用650毫安时电池，号称一次充电续航可以使用2个月。本站附鼠标参数信息如下：

雷蛇 | 宝可梦耿鬼款无线鼠标、鼠标垫上架，套装价 1549 元 Jul 19, 2024 am 04:17 AM

本站7月12日消息，雷蛇今日宣布推出雷蛇|宝可梦耿鬼款无线鼠标、鼠标垫。其单品定价分别为1299元和299元，包含两款产品的套装价则为1549元。这并非雷蛇首次推出耿鬼联名的外设产品，2023年雷蛇就推出过耿鬼款的八岐大蛇V2游戏鼠标。此次推出两款新品整体均采用与鬼斯、鬼斯通、耿鬼家族外观类似的深紫色底色，印有这三只宝可梦和精灵球的线条轮廓，中间则为耿鬼这一经典幽灵属性宝可梦的彩色大图。本站发现，雷蛇|宝可梦耿鬼款无线鼠标基于此前发布的毒蝰V3专业版打造。其整体重量为55g，搭载雷蛇第二代FOC

VGN 联名《艾尔登法环》键鼠系列产品上架：菈妮 / 褪色者定制主题，首发 99 元起 Aug 12, 2024 pm 10:45 PM

本站8月12日消息，VGN于8月6日推出了联名《艾尔登法环》键鼠系列产品，包含键盘、鼠标和鼠标垫，采用菈妮/褪色者定制主题设计，目前系列产品已上架京东，售价99元起。本站附联名新品信息如下：VGN丨艾尔登法环S99PRO键盘该键盘采用纯铝合金外壳，辅以五层消音结构，使用GASKET板簧结构，拥有单键开槽PCB、原厂高度PBT材质键帽、铝合金个性化背板；支持三模连接和SMARTSPEEDX低延迟技术；接入VHUB，可一站式管理多款设备，首发549元。VGN丨艾尔登法环F1PROMAX无线鼠标该鼠标

Microsoft Word无法使用鼠标选择或突出显示文本 Feb 20, 2024 am 09:54 AM

这篇文章探讨了在MicrosoftWord中鼠标无法选择或突出显示文本时可能出现的问题，以及如何解决这些问题。为什么我无法在MicrosoftWord中选择文本？在MSWord中无法选择文本可能受多种原因影响，如权限限制、文档受保护、鼠标驱动问题或文件损坏。以下将提供解决这些问题的方法。修复MicrosoftWord无法使用鼠标选择或突出显示文本如果MicrosoftWord无法使用鼠标选择或突出显示文本，请遵循下面提到的解决方案：确保您的鼠标左键正在工作检查您是否有资格更改该文件更新鼠标的驱动

雷蛇鼠标驱动在哪个文件夹 Mar 02, 2024 pm 01:28 PM

很多用户不知道自己雷蛇驱动安装的文件去了哪里，这些驱动文件一般都是安装在了系统盘，也就是电脑的C盘，具体位置在programfiles下的RAZE文件夹。雷蛇鼠标驱动在哪个文件夹答：在系统C盘的programfiles下的RAZE文件夹。一般驱动都会安装在C盘，按照位置去找就可以了。雷蛇鼠标驱动安装方法介绍1、下载好官网的文件以后双击运行自己下载的EXE文件。2、等待软件加载。3、在这里可以选择你要安装的哪个驱动。4、选择好以后点击右下角的“安装”就可以了。

鼠标cpi是什么意思 Feb 12, 2024 pm 09:40 PM

CPI又叫做countperinch，鼠标中的CPI就是鼠标的灵敏度的高低，在使用的时候CPI数字越高说明鼠标越灵敏，现在小编在本篇文章中给大家带来了鼠标cpi按钮功能介绍。cpi含义x和y轴含义左键变成右键滚轮上下失灵灵敏度怎么调鼠标不动恢复鼠标cpi是什么意思答案：动态移动中每英寸反馈回来的坐标点数，就是鼠标的灵敏度的高低。按钮功能介绍：1、调节鼠标的移动速度按键;2、通过按cpi键调节鼠标灵敏度;3、衡量鼠标灵敏度的动态指标;4、可对CPI在500/1000CPI之间自由调节;

Windows 10登录后仅显示黑屏和鼠标 Dec 28, 2023 pm 04:10 PM

win10系统是当下电脑使用系统中最为常见的一款系统了，在对win10系统的使用过程中一些系统的不足也慢慢的显露额出来，许多的小伙伴们最近都反应win10在开机后桌面并没有正常的显示而是黑屏了只有一个鼠标的光标，对于这种问题其实很好解决！今天小编就为大家带来了win10桌面黑屏只有鼠标解决方法有需要的小伙伴们就快来看看吧。win10登录后黑屏只有鼠标图文解决教程：操作方法：1、在开始菜单上单击右键，选择2、点击“其他电源设置”3、点击左侧的4、在“定义电源按钮并启用密码保护”界面点击“更改当前不

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题