jQuey に基づいており、マウスをスライドさせると色が変わります (行全体の色が変わります)

jQuey に基づいており、マウスをスライドさせると色が変わります (行全体の色が変わります)_jquery

WBOY

リリース： 2016-05-16 15:27:22

オリジナル

1178 人が閲覧しました

多くの 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 サイトをご利用いただきますようお願いいたします。