css里给h2文字设置鼠标经过下划线

css里给h2文字设置鼠标经过下。

1、鼠标滑过的文字与图片必须是在一个容器内，并且是容器盒子内相邻的元素。

2、需要将图片先进行隐藏。

3、设置文字滑过时hover+图片样式才让图片显示出来。

一般有两种方法：

一、通过CSS下划线代码：text-decoration:underline来设置文字下划线。

实例演示如下：

1、实例代码如下：

此时页面效果如下：

2、修改第1步中的txt样式，加入text-decoration:underline。

此时页面效果如下，出现了下划线。

二、通过设置div的border实现效果：

实例演示如下：

在第一种方法的初始代码上，增加border-bottom: 1px solid black、padding-bottom: 10px两个关键样式，如下：

此时页面效果如下：

跟定义链接连样式一样，通过a:hover来实现就可以，这个表示当鼠标移动到这个元素上时显示的样式：

a {color:#FF0}

a:hover {color:#F00}

锚点代码：

<a name="m1">锚点1</a>

上面的方式是不区分锚点的超链接的，如果要区分，可能为锚点增加一个特定样式，对应的CSS和锚点写法如下：

CSS：

.anchor a {color:#FF0}

.anchor a:hover {color:#F00

HTML锚点代码：

<a class="anchor" name="m1">锚点1</a>

增加一个class样式，这样只会对包含anchor样式的a标签生效，可以避免与正确的超链接冲突

---