Berdasarkan jQuey, warna berubah apabila tetikus meluncur ke atasnya (keseluruhan baris berubah warna)

Berdasarkan jQuey, warna berubah apabila tetikus meluncur ke atasnya (keseluruhan baris berubah warna)_jquery

WBOY

Lepaskan： 2016-05-16 15:27:22

asal

1163 orang telah melayarinya

Banyak laman web mempunyai kesan ini, iaitu, apabila tetikus diletakkan pada baris senarai berita, keseluruhan baris akan berubah warna Walaupun fungsi ini juga boleh dicapai menggunakan CSS, banyak versi pelayar tidak menyokong CSS3. Tidak ada sokongan yang baik, jadi dalam keadaan semasa, menggunakan jQuery untuk mencapai fungsi seperti ini adalah pilihan yang baik.

Tanpa berlengah lagi, saya hanya akan menyiarkan kod jquery untuk anda Kod khusus adalah seperti berikut:

<!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>

Salin selepas log masuk

Kod di atas melaksanakan fungsi yang diperlukan, walaupun ia tidak cukup cantik dan boleh diubah suai mengikut keperluan sebenar. Kaedah pelaksanaan juga sangat mudah, iaitu menggunakan kaedah hover() untuk mengikat dua fungsi pengendalian acara ke acara hover untuk menambah atau memadam kod CSS yang menetapkan warna latar belakang elemen li.

Kod di atas juga sangat mudah Jika anda mempunyai sebarang pertanyaan, sila tinggalkan saya mesej. Pada masa yang sama, terima kasih atas sokongan berterusan anda terhadap laman web Script House.