Heim > Artikel > Web-Frontend > CSS实现的鼠标悬浮整行背景变色代码_html/css_WEB-ITnose
CSS实现的鼠标悬浮整行背景变色代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:081743Durchsuche
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/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS概述<选择器总结>_html/css_WEB-ITnoseNächster Artikel：前端需要点亮的技能树（2015年12月31日更新）_html/css_WEB-ITnose