CSS实现的鼠标悬浮整行背景变色代码_html/css

CSS实现的鼠标悬浮整行背景变色代码_html/css_WEB-ITnose

WBOY

发布： 2016-06-24 11:31:08

原创

1692 人浏览过

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/