English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
本文实例讲述了jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta name="keywords" content="关键词1，关键词2，关键词3等等"/>
<title>鼠标经过时高亮，其他的暗</title>
<style type="text/css">
*{margin:0; padding:0;}
ul,li{list-style:none;}
ul{width:900px; height:200px; margin:100px auto;}
li{width:200px; height:200px; display:inline-block; border:1px solid #d8d8d8; position:relative;}
.addblack{width:200px; height:200px; display:none; background:#000;filter: alpha(opacity=10);-moz-opacity: 0.1; opacity: 0.1; position:absolute; left:0; top:0;}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".index_Img").hover(function(){
$(this).siblings().find(".addblack").show();
},function(){
$(this).siblings().find(".addblack").hide();
$(this).find(".addblack").hide();
)
)
</script>
</head>
<body>
<ul>
<li class="index_Img">
Apfel
<div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
</li>
<li class="index_Img">
Banane
<div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
</li>
<li class="index_Img">
Traube
<div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
</li>
<li class="index_Img">
Ananas
<div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
</li>
</ul>
</body>
</html>
Das Lauffoto ist wie folgt:
Interessierte Leser, die mehr über jQuery erfahren möchten, können die Themen auf dieser Website lesen: "jQuery-Switch-Animationen und -Techniken zusammengefasst", "jQuery-Traversing-Algorithmen und -Techniken zusammengefasst", "jQuery-Verlängerungstechniken zusammengefasst", "jQuery-häufig verwendete Plugins und -Verwendungen zusammengefasst", "jQuery-Zieheffekte und -Techniken zusammengefasst", "jQuery-Tabellenoperationstechniken zusammengefasst", "jQuery-Ajax-Verwendung zusammengefasst", "jQuery-klassische Effekte zusammengefasst", "jQuery-Animationen und -Effekte zusammengefasst" und "jQuery-Selektorverwendung zusammengefasst".
Es wird gehofft, dass der Artikel, den dieser Text beschreibt, für alle jQuery-Programmierung von Vorteil sein wird.
Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheber. Der Inhalt wurde von Internetnutzern selbstständig eingereicht und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Haftung. Wenn Sie verdächtige urheberrechtliche Inhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden:3codebox.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails zur Meldung von Verstößen und stellen Sie relevante Beweise zur Verfügung. Sobald nachgewiesen, wird diese Website die verdächtigen urheberrechtlichen Inhalte sofort löschen.)