ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 効果を通じて、インターレース色の変更とマウスオーバー ハイライトを使用して、JQuey の css() メソッドと hover() メソッドを学びます_html/css_WEB-ITnose
CSS 効果を通じて、インターレース色の変更とマウスオーバー ハイライトを使用して、JQuey の css() メソッドと hover() メソッドを学びます_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:471395ブラウズ
次の HTML と CSS は、交互の行の div の色を変更できます:
<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>
効果を実現したい場合: マウスを特定の行に移動すると、背景とテキストの色が変更され、マウスを削除すると元の色に戻ります。以前の背景とテキストの色。
JQuery コードはこの効果を実現できます:
$("#container div").hover(function(){ // 鼠标经过时,改变背景色和文字颜色 $(this).css("backgroundColor","#346ba3"); $(this).css("color","rgb(255,255,255)"); },function(){ // 鼠标移除,还原背景色和文字颜色 $(this).css("backgroundColor",""); $(this).css("color","");});
JQuery の使用は非常に簡単であることがわかります:
1. マウスオーバーとマウスアウトに対応する 2 つの関数を受け取る hover() API を提供します。
2. 背景とテキストの色を空白のままにすると、マウスオーバー前の要素の色が復元されます。
3. RGB 形式と 16 進数形式のカラー値をサポートし、色変換の手間を省きます。
したがって、このブログで言及されている RGB から HEX への形式は実用的ではありませんが、このアルゴリズムは依然として非常に優れているので、ここに記録します:
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]);}
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ブラウザで表示するとローカル画像が表示されない_html/css_WEB-ITnose