How to implement SS to change the color of the entire line when the mouse is placed on the line_html/css

How to implement SS to change the color of the entire line when the mouse is placed on the line_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:41

Original

1699 people have browsed it

How to use CSS to realize that the entire row changes color when the mouse is placed on a row:

This effect is seen on many websites, that is, when the mouse is placed on a When the article list row is displayed, this row will display a different color from other rows. The article list on this site also has this effect, which is easy for viewers to identify and is very user-friendly. Here is a brief introduction on how to achieve this effect. The code example is as follows:

<!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>

Copy after login

The above code achieves this effect by using the E:hover pseudo-class selector.

However, this method has a disadvantage, that is, the IE6 browser does not support the E:hover pseudo-class selector except for the a element. The following is a method that is compatible with all browsers. The code example is as follows:

<!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>

Copy after login

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0504/ 723.html

The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=4643