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">
Manzana
<div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
</li>
<li class="index_Img">
Plátano
<div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
</li>
<li class="index_Img">
Uva
<div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
</li>
<li class="index_Img">
Piña
<div class="addblack" style="left: 0px; top: 0px; width: 200px; height: 200px; display: none;"></div>
</li>
</ul>
</body>
</html>
La imagen de ejecución se muestra a continuación:
Los lectores interesados en más contenido relacionado con jQuery pueden consultar las secciones especiales de este sitio: 'Resumen de efectos y técnicas de cambio de jQuery', 'Resumen de algoritmos y técnicas de iteración de jQuery', 'Resumen de técnicas de extensión de jQuery', 'Resumen de plugins y usos comunes de jQuery', 'Resumen de efectos y técnicas de arrastrar y soltar de jQuery', 'Resumen de técnicas de operación de tablas (table) de jQuery', 'Resumen de uso de Ajax en jQuery', 'Resumen de efectos y técnicas clásicos de jQuery', 'Resumen de uso de animaciones y efectos de jQuery' y 'Resumen de técnicas de selector de jQuery'.
Espero que el contenido de este artículo sea útil para la programación de jQuery de todos.
Declaración: El contenido de este artículo se obtiene de la red, pertenece a los propietarios originales, se contribuye y carga espontáneamente por los usuarios de Internet. Este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de copyright, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.