Heim > Web-Frontend > HTML-Tutorial > SS如何实现把鼠标放在行上整行变色_html/css_WEB-ITnose

SS如何实现把鼠标放在行上整行变色_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:40:41
Original
1675 Leute haben es durchsucht

CSS如何实现把鼠标放在行上整行变色:

在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面就简单介绍一下如何实现此效果。代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">a{text-decoration:none;}li:hover{background-color:green;}</style></head><body><ul>  <li><a href="#">html</a></li>  <li><a href="#">div+css</a></li>  <li><a href="#">javascript</a></li>  <li><a href="#">Jquery</a></li></ul></body></html>
Nach dem Login kopieren

以上代码通过使用E:hover伪类选择器实现了此效果。

但是此中方法有个缺点,就是IE6浏览器不支持除去a元素之外的E:hover伪类选择器。下面介绍一下能够兼容所有浏览器的方法,代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">a{text-decoration:none;}.over{background-color:green;}.out{background-color:#FFF;}</style></head><body><ul>  <li onmouseover="this.className='over'" onmouseout="this.className='out'">    <a href="#">html</a>  </li>  <li onmouseover="this.className='over'" onmouseout="this.className='out'">    <a href="#">div+css</a>  </li>  <li onmouseover="this.className='over'" onmouseout="this.className='out'">    <a href="#">javascript</a>  </li>  <li onmouseover="this.className='over'" onmouseout="this.className='out'">    <a href="#">Jquery</a>  </li></ul></body></html>
Nach dem Login kopieren

原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0504/723.html

最原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4643

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage