ホームページ > 記事 > ウェブフロントエンド > jQuey に基づいており、マウスをスライドさせると色が変わります (行全体の色が変わります)_jquery
jQuey に基づいており、マウスをスライドさせると色が変わります (行全体の色が変わります)_jquery
- WBOYオリジナル
- 2016-05-16 15:27:221097ブラウズ
多くの Web サイトにはこの効果があります。つまり、ニュース リストの行にマウスを置くと行全体の色が変わります。この機能は CSS を使用して実現することもできますが、多くのブラウザーのバージョンは CSS3 をサポートしていません。適切なサポートがないため、現在の状況では、この種の機能を実現するには jQuery を使用するのが良い選択です。
早速、jquery コードを投稿します。具体的なコードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
ul,li{
list-style:none;
font-size:12px;
}
li{
width:250px;
height:25px;
line-height:25px;
}
.hover{
background-color:#666;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
jQuery.hoverPlugin={
hover:function(selector){
$(selector).hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
});
}
};
$.hoverPlugin.hover(".mytest li");
});
</script>
</head>
<body>
<ul class="mytest">
<li>1.俄罗斯爆发陨石雨，导致上千人受伤</li>
<li>2.朝鲜成功进行核试验，半岛无核进程终结</li>
<li>3.中国进入春运高峰期</li>
</ul>
</body>
</html>
上記のコードは必要な機能を実装していますが、十分に美しいとは言えず、実際のニーズに応じて変更できます。実装方法も非常に簡単で、hover() メソッドを使用して 2 つのイベント処理関数を hover イベントにバインドし、li 要素の背景色を設定する CSS コードを追加または削除します。
上記のコードも非常に簡単です。ご質問がございましたら、すぐに返信させていただきますので、引き続き Script House の Web サイトをご利用いただきますようお願いいたします。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。