css hover的时候怎么用

html-css08

css hover的时候怎么用,第1张

单纯只css做不到这个要求，hover的使用方法如下：

<head>

<title></title>

<style type="text/css">

a:link{color: #F00}

a:visited{color: #00F}

a:hover{color: #0F0}

a:active{color: #FF0}

</style>

</head>

<body>

<p style="color:#399"><a href="#">文字</a></p>

</body>

</html>

但是可以用js辅助完成这个效果，使用onMouseOver（鼠标移到目标上）和onMouseOut（鼠标移开目标后）实现对a标签或其它html标签设置hover样式。

直接对标签使用即可，无论A标签、SPAN标签、DIV标签等均可。

<a style="color:#00Ftext-decoration:none"

onMouseOver="this.style.color='#F00'this.style.textDecoration='underline'"

onMouseOut="this.style.color='#00F'this.style.textDecoration='none'">

DIVCSS5

</a>

以上对a超链接代码设置默认样式、鼠标移到目标上、鼠标移开目标后样式。特点代码比较长。

DIVCSS5重要提示说明：为了看到鼠标移开后与默认样式相同，通常需要直接对标签使用style设置默认CSS样式并且与onMouseOut设置CSS样式保持相同。以免初始状态对象样式与鼠标移开对象后样式的不同。

但是另外需要注意：淘宝的描述页是无法使用外置css或者js模块的，外置css模块需要购买，js模块还没有开放

a的作用是链接，点击<a></a>之间的内容，页面会跳转到链接的地址。直接设置它的颜色，比如，例子中a{color:#000}，意思是<a></a>之间的内容显示为黑色，如果不设置的话，浏览器默认的a链接的颜色是蓝色；

a:hover属于css，它设置了当鼠标悬浮在链接内容之上时，链接内容的样式，比如，例子中a:hover{ color:#F00}，它设置了当鼠标悬浮在该链接内容上时，链接内容变成红色。

扩展资料：

总结几个a的伪类：

a:link 英文link就是链接的意思，代表当一段文本为链接时的属性。

a:visited 英文visited就是访问过的意思，代表这段文本被点击之后的属性。

a:hover 英文hover就是悬停的意思，代表鼠标指针放在这个链接上时的属性。

a:active 英文active就是有效的、快速的意思，代表鼠标按下时一瞬间的属性。

一般最常用的方法是a {CSS属性} a后面什么也没有，代表一次定义这四个属性，然后根据需要再定义其中某个属性就可以了，最常用的是a:hover {CSS属性}

参考资料：百度百科-CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{ margin:0pxpadding:0px}

.g{ float:leftwidth:676px}

.g a{ margin:0 5px}

.g .g5 a{ background:#000display:blockwidth:90pxheight:213px float:left}

.g .g5 a:hover,.g .current a{ background:redwidth:366pxheight:213pxdisplay:block}

.g .g6 a{background:#000display:blockwidth:90pxheight:213px float:left}

.g .g6 a:hover{background:redwidth:366pxheight:213pxdisplay:block}

.g .g7 a{background:#000display:blockwidth:90pxheight:213px float:left}

.g .g7 a:hover{background:redwidth:366pxheight:213pxdisplay:block}

</style>

</head>

<body>

<div class="g">

<div class="g5 current"><a href="#">as</a></div>

<div class="g6"><a href="#">as</a></div>

<div class="g7"><a href="#">as</a></div>

</div>

</body>

</html>