Home >Web Front-end >HTML Tutorial >Through CSS effects: interlaced color change and mouse-over highlighting, learn JQuey's css() and hover() methods_html/css_WEB-ITnose
Through CSS effects: interlaced color change and mouse-over highlighting, learn JQuey's css() and hover() methods_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:49:471394browse
The following HTML and CSS can change the color of divs on alternate lines:
<head> <style> #container div{ width:200px; height:25px; font-size:14px; text-align:center; color:#474747; } .even{ background-color: #EDEDED; } .odd{ background-color: #FAFAFA; } </style></head><body> <div id="container"> <div class="even">1</div> <div class="odd">2</div> </div></body>
If you want to achieve the effect: move the mouse to a certain line to change the background and text color; move the mouse Remove and restore the previous background and text colors.
JQuery code can achieve this effect:
$("#container div").hover(function(){ // 鼠标经过时,改变背景色和文字颜色 $(this).css("backgroundColor","#346ba3"); $(this).css("color","rgb(255,255,255)"); },function(){ // 鼠标移除,还原背景色和文字颜色 $(this).css("backgroundColor",""); $(this).css("color","");});
You can see that using JQuery is very simple:
1. The hover() API is provided. Receives 2 functions, corresponding to mouseover and mouseout.
2. Leave the background and text colors blank to restore the color of the element before mouseover, which is great.
3. Supports color values in rgb format and hexadecimal format, saving us the trouble of color conversion.
So the RGB to HEX format mentioned in this blog has no practical use, but this algorithm is still very well written. I record it here:
function rgb2hex(rgb){ function hex(x) { return ("0" + parseInt(x).toString(16)).slice(-2); } rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);}
Local images cannot be displayed when viewed in a browser_html/css_WEB-ITnoseNext article：Local images cannot be displayed when viewed in a browser_html/css_WEB-ITnose" href="https://m.php.cn/faq/275025.html">Local images cannot be displayed when viewed in a browser_html/css_WEB-ITnose