Home > Article > Web Front-end > How to implement SS to change the color of the entire line when the mouse is placed on the line_html/css_WEB-ITnose
How to implement SS to change the color of the entire line when the mouse is placed on the line_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:411670browse
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> 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> 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