你的位置:首页 > 网页设计

[网页设计]CSS实现的鼠标悬浮整行背景变色代码


CSS实现的鼠标悬浮整行背景变色代码:
在新闻列表形式的不居中,为了清晰的分辨每一行,一般当鼠标悬浮在一行上的时候,能够实现当前行整行变色,下面就通过代码实例简单介绍一下如何实现此效果,代码如下:

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title></head><body><style type="text/css">a.menulink { display:block; width:198px; text-align:left; text-decoration:none; font-family:arial; font-size:12px; color:#000000; border:none; border:solid 1px #ffffff;}a.menulink:hover { background-color:#f0e1ff;}</style><table border="0" width="198"> <tr>  <td width="100%"><a href="#" class="menulink">蚂蚁部落一</a></td> </tr> <tr>  <td width="100%"><a href="#" class="menulink">蚂蚁部落二</a></td> </tr> <tr>  <td width="100%"><a href="#" class="menulink">蚂蚁部落三</a></td> </tr></table></body></html>

 

在以上代码中,当鼠标悬浮在行上的时候,能够实现整行变色,下面做一下简单介绍。
一.实现过程:
将a元素通过display:block转换成块级元素,这样才能够设置它的尺寸。
a.menulink:表示a标签中class属性值为menulink的元素。
a.menulink:hover:设置a标签中class属性值为menulink的元素,当鼠标悬浮在链接上的样式。
二.相关阅读:
1.hover可以参阅CSS中a:link、a:visited、a:hover、a:active的用法一章节。 
2.hover也可以参阅CSS的伪类选择符E:hover一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10887

更多内容可以参阅:http://www.softwhy.com/divcss/