标悬停提示是指当鼠标悬停在某一元素上时浏览器弹出的黄色小文本框，一般开发者大多会结合Javascript创建各式各样的自定义提示，其实通过CSS定位也可以实现，首先我们看一下效果图：

接下来我们详细介绍它的实现方法：

1. 首先创建一个简单的带链接的HTML（根据自己的需要），在链接显示的文本后面添加需要提示的内容并置于span标签中（加粗部分）

   <p>
   

   <a href="www.laosiji.com" style="text-decoration:none">www.你懂的.com<span>(未满18周岁请勿点击)</span></a> is a Horror Movies Website.

   </p>

2. 接下来是关键部分，先将链接的position属性设置为relative,因为<a>是<span>的父级元素，这样接下来才可以让<span>中的提示内容根据<a>中的链接文本进行绝对定位。<span>中的提示内容我们不希望它一开始就显示出来，所以要将它的display属性设置为none.

   a{position:relative;}
   

   a span{display:none;}

3. 当鼠标悬停在链接上时我们希望显示出span中的提示内容，这时就需要将span的display属性设置为block，为了让其出现在链接的右下方，需要将span的position属性设置为absolute，并设置一定的距离（顶部1em,左边2em).

   a{position:relative;}

   a span{display:none;}

   a:hover span{display:block;

   position:absolute;top:1em;left:2em;}

4. 前两步基已经完成了本次案例的主体，剩下的就是给span添加一些样式，让它看起来更像是提示。可以添加一些内边距 边框和背景颜色等。

   <style type="text/css">
   

   a{position:relative;}

   a span{display:none;}

   a:hover span{display:block;

   position:absolute;top:1em;left:2em;

   width:160px;
   

   padding:0.2em 0.6em;

   border:1px solid #996633;

   background-color:#FFFF66;

   color:red;}

   </style>

   PS:最后科普一下display:none与visible:hidden的区别
   

   display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。

   visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。

似一些大型电商网站，一般很多产品展示图都加上了很多炫酷的效果来增强用户体验。当鼠标移上去就会出现特效是常见的一种动作，下面主要说说鼠标经过图片时候出现高光的特效。效果如下：

红色指向是出现高光的部分

重要的CSS3样式：

主要用来背景的渐变来实现那条高光，然后再运用动画来实现运动的距离位置！

css链接

链接可以使用任何css属性(例如,color,font-family,background等)来设置样式.

另外,链接的样式可以不同,具体取决于所处的状态.以下伪选择器可用:

a:link 定义正常的为访问链接的样式

a:visited 定义访问链接的样式

a:active 一旦点击链接,链接就会激活

a:hover 当鼠标悬停时,链接的样式

下面的例子,创建一个链接,当鼠标移动到它上面的时候会改变样式

html代码:

<p><a href="https://www.sougou.com" target="_blank">搜狗</a></p>

css代码:

a:hover{ color:red; }

执行结果如下:

这是鼠标移动到链接上时,显示的样式

当为链接设置样式时,必须遵守以下规则:

a:hover 必须在a:link和a:visited之后

a:active 必须在a:hover之后

默认情况下,文本链接由浏览器加下划线.

处理带链接的文本,css最常见的用法之一是删除下划线.在下面的示例中,text-decoration属性用于删除下划线.

html代码:

<p><a class="text-decoration" href="https:www.sougou.com">我的下划线已经被删除了!</a></p>

css代码:

a.text-decoration:link{text-decoration:none;}

效果如下:

以下属性用于控制链接的样式:

border:none 从包含链接的图像中删除边框

outline:none 删除IE中点击链接行上的虚线边框

二 css自定义鼠标光标样式

css允许你将鼠标悬停在元素上时,设置所需的光标样式.例如,你可以将光标更改为手形图标,帮助图标等.而不是默认的指针.

在下面的例子中,当我们将鼠标移动到span元素上时,鼠标指针被设置为一个帮助图标.(cursor就是光标的意思)

<span style="cursor:help;">需要帮忙么?</span>

效果如下:

cursor属性还有许多其他的值.例如:

default:默认光标

crosshair:光标显示为十字准线

pointer:光标显示为手形图标

cursor的值比较多,用图片显示给大家:

通常改变鼠标光标的外观,是为了提高网站访问者的体验.但是,选择错误的光标风格也可能会引起误解.