css鼠标悬停显示用按钮，如何用css设置鼠标悬停的状态样式
一、关于鼠标悬停事件的七种用法
最近写网页前端的过程中，发现会经常用到伪类的使用，如:link,:visited,:hover,:active,:disabled等。其中:link通常表示未点击链接的状态，:visited则为已点击的状态，:hover为鼠标悬停，：active为鼠标按下到放开时链接或按钮的状态，:disabled常用于表示元素不可用时的状态。其中数鼠标悬停交互（hover/onmouseover）的方式的运用最为多样化，当css不能满足悬停事件的时候常常借助js来实现。在开发人员和设计师的脑洞下鼠标悬停事件可以有多种多样的表现形式。从交互作用上总结起来大致有以下几类：
1.最常见的是用在可点击元素或者网页链接上，常见为网址鼠标悬停显示下划线、按钮/图标悬停改变颜色等状态，若是material design风格会常将鼠标选中的卡片加重阴影，使卡片有上浮的感觉。
有些图标的鼠标悬浮会出现tips来提示按钮的含义或者作用。将用户的鼠标移动行为即时反馈，以提示人们选中了可点击的元素或者超链接，可以进行点击了。
2.用于导航中显示二级菜单/分类详情，其中选中的一级菜单链接可以直接点击显示，也可选中二级菜单进入更详细的分类页面。
需要注意的是，当导航中的每个选项都有二级菜单并且为鼠标悬停显示的时候，二级菜单的弹出有一定的时间延迟会好一些，原因是如果鼠标悬停立刻显示的话，当鼠标沿着导航栏划过的时候二级菜单的显示会使人眼花缭乱，增加用户烦躁感；而若延迟出现二级菜单则可以在用户在某选项短暂停留后（用户对此选项可能有兴趣，想点击）再出现，可在相关选项聚焦其注意力。
3.显示隐藏的按钮/图标。
当某些按钮：（1）不是那么重要、（2）不希望按钮太吸引用户视线、（3）每个同类图片或模块都有相同操作的按钮时，则可在用户对某板块感兴趣而将鼠标移入的时候显示该按钮。例如facebook里的广告，关闭按钮只在鼠标悬停在广告内容上才出现，相比于没有关闭按钮的贴片广告而言增加了用户的控制感，相比于关闭按钮默认一直显示的贴片广告而言可使用户在关闭前增强用户对广告的关注度，有益于广告的转化率（若关闭按钮一直显示则用户的注意力大部分会在关闭按钮上急着想关闭而容易忽视广告本身的内容。）
4.通过隐藏或弱化其它元素或者突出选中元素来聚焦用户的视线。可以在当前页面内更好地展示产品。
5.通过图片遮罩或者在选中的元素周围弹出新浮层来显示相关元素的额外/更详细的信息。使用户不需要跳转页面就可以获得更多的相关信息。
6.鼠标悬停自动播放gif，在这里鼠标悬停是一个时机，悬停在gif图片上图片才变成动图播放，而不是一开始就不停地播放动图，使人眼花缭乱（这和视频很少设置为自动播放的道理是相同的）。
7.显示可切换选项，如在视频中可即时切换声音状态或者画质状态。
以上只是整理了鼠标悬停事件的几种用法，这些用法有优点也有缺点，网页元素应该根据自身特点选择是否采用鼠标悬停触发事件。欢迎批评指正。（手动笑脸）
二、如何用css设置鼠标悬停的状态样式
1、首先我们先来编写一个HTML框架
2、我们来创建一个a标签，进行超链接的展示；
3、我们接下来书写head书签，在其中进行书写其他编写；
4、接着书写style标签，在其中书写css代码；
5、我们利用a:link进行对未点击的超链接进行样式设置；
6、接着利用a:visited进行对已点击的超链接进行设置；
7、最后，我们还可以对鼠标悬停的状态进行样式修改，如图代码a:hover；
三、css鼠标悬停显示文字
题主是否想询问“css鼠标悬停显示文字的原因”？提高用户体验、增加可访问性。
1、提高用户体验：当用户将鼠标悬停时，显示文字可以提供额外的信息或提示，使用户更好地理解该元素的功能或内容。这可以帮助用户更轻松地与页面进行交互，并提高用户的满意度。
2、增加可访问性：对于视力障碍用户或使用屏幕阅读器的用户来说，鼠标悬停时显示文字是一种重要的辅助方式。用户无法直接看到鼠标指针的位置，通过屏幕阅读器可以读取悬停文字，从而获取有关元素的更多信息。
四、鼠标悬停tip效果如何用css实现
鼠标悬停tip效果，是一个非常有用的功能，在页面布局受到局限的时候，我们不能往页面中添加过多的
内容。而鼠标悬停tip效果，可以在鼠标移上去的时候有一个提示信息，我们可以将相关的信息放置在这
个tip中，不影响页面美观而又能很好的传达信息。
应用div
css布局，我们用CSS可以实现这样的效果吗？其实这很简单，我们可以新建一个span或div
，将之初始设置成：display:none，隐藏这一标签的内容。（关于display可以参考这里）当鼠标移上去
的时候，我们将此内容显示出来。然后对其进行定位。就达到了鼠标悬停tip效果。
鼠标悬停tip效果实例
CSS代码
a#tip
{position:relative;left:30px;top:30px;}
a#tip:link
{text-decoration:none;color:#c00;display:block}
a#tip:hover
{text-decoration:none;color:#000;display:block}
a#tip
span
{display:none;}
a#tip:hover
#tip_info
{
display:block;
border:1px
dashed
#c00;
background:#fff;
padding:1px;
position:absolute;
top:0px;
left:120px;
}
鼠标悬停tip效果实例
XHTML代码
<a
id="tip"
href="">【www.zlbiz.com】
<span
id="tip_info">
<img
src=""
alt="www.zlbiz.com"
width="200"
height="90"
/>
</span>
</a>
查看鼠标悬停tip运行效果
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Strict//EN"
"">
<html
xmlns="">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>www.zlbiz.com</title>
<style
type="text/css">
body
{font:normal
14px
宋体}
a#tip
{position:relative;left:30px;top:30px;}
a#tip:link
{text-decoration:none;color:#c00;display:block}
a#tip:hover
{text-decoration:none;color:#000;display:block}
a#tip
span
{display:none;}
a#tip:hover
#tip_info
{
display:block;
border:1px
dashed
#c00;
background:#fff;
padding:1px;
position:absolute;
top:0px;
left:120px;
}
</style>
</head>
<body>
<a
id="tip"
href="">【www.zlbiz.com】
<span
id="tip_info"><img
src=""
alt="www.zlbiz.com"
width="200"
height="90"
/></span>
</a>
</body>
</html>
