cari

Rumah >hujung hadapan web >tutorial js >Berdasarkan jQuey, warna berubah apabila tetikus meluncur ke atasnya (keseluruhan baris berubah warna)_jquery

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

WBOY
WBOYasal
2016-05-16 15:27:221141semak imbas

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pelaksanaan lompat halaman dan memuatkan halaman luaran dalam jQuery web mudah alih development_jqueryArtikel seterusnya：Pelaksanaan lompat halaman dan memuatkan halaman luaran dalam jQuery web mudah alih development_jquery

Artikel berkaitan

Lihat lagi