Maison > Article > interface Web > CSS实现的鼠标悬浮整行背景变色代码_html/css_WEB-ITnose
CSS实现的鼠标悬浮整行背景变色代码_html/css_WEB-ITnose
- WBOYoriginal
- 2016-06-24 11:31:081739parcourir
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/
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：CSS概述<选择器总结>_html/css_WEB-ITnoseArticle suivant：前端需要点亮的技能树（2015年12月31日更新）_html/css_WEB-ITnose