这是一个鼠标滑过高亮显示图片的代码，没有用到任何滤镜，只是用到的是fadeTo（）这个jQuery方法。
这个是jQuery代码：
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('ul.qidao li img').fadeTo('fast',0.5)
.parent().css({display:'block',width:'117px',height:'94px',backgroundColor:'#62693f',marginLeft:'1px',marginTop:'1px'});
$('ul.qidao li a').hover(function() {
$(this).children().fadeTo('fast',1);
},function() {
$(this).children().fadeTo('fast',0.5);
});
});
</script>
这里是相关的html代码：
<div style=" width:841px; height:389px;margin:5px auto">
<ul class="qidao">
<li><a href="#"><img src="images/qidao.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-02.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-03.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-04.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-05.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-02.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-03.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-04.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-05.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-02.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-03.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-04.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-05.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-02.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-03.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-04.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-05.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-02.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-03.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-04.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-05.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-02.jpg" width="115" height="92" /></a></li>
<li><a href="#"><img src="images/qidao-03.jpg" width="115" height="92" /></a></li>
</ul>
</div>
这里的a标签我给了一个深色的背景，然后让图片半透明，鼠标滑过的时候让图片不透明，就实现了高亮的效果。
这里我把源文件送上，需要的朋友可以下载。
分享到：
相关推荐
在这个特定的案例中，“jQuery 图片特效，鼠标经过图标高亮显示”是一种增强用户体验的技术，当用户将鼠标悬停在图标上时，图标会变得更为醒目，吸引用户的注意力并提供视觉反馈。 实现这一效果的基本步骤如下： 1...
在网页设计中，"纯CSS鼠标经过列表高亮显示"是一种常见的交互效果，它使得用户在鼠标悬停在列表项上时，该列表项能够突出显示，提高用户体验和交互性。这种效果通常应用于导航菜单、文章列表或者任何需要强调当前...
使用QWidgetAction实现的鼠标滑过菜单项图标高亮显示，用到了QWidgetAction以及自定义QWdiget，实现了菜单项图标、文字以及子菜单指示器的定制，使用qss+动态属性作为菜单项的样式定制；代码是在qt5.7.1 的基础上...
在这个"JavaScript实现鼠标滑过高亮显示纵向3级白色的导航菜单源码"中，我们将深入探讨如何利用JavaScript来创建一个具有层次感的导航菜单，并在用户鼠标滑过时实现高亮效果。 首先，我们需要理解导航菜单的基本...
本示例源码主要涉及的是如何利用JavaScript实现一种常见的网页导航菜单效果：当鼠标滑过一级菜单时，对应的二级甚至三级菜单高亮显示，形成一个垂直的多层次导航结构。这样的设计既提升了用户体验，也使网站的导航...
本文将深入探讨如何使用jQuery实现鼠标滑过产品图片时，背景高亮闪烁显示的效果，这个功能在电商网站中十分常见，能够吸引用户的注意力并提升用户体验。 首先，我们需要了解基本的HTML结构。在产品展示页面中，每个...
本教程将深入探讨如何利用jQuery的`hover`事件实现鼠标悬停时九宫格图片的高亮显示效果。这个效果可以增强用户对网页内容的互动体验，使用户更容易注意到并操作特定的图像元素。 首先，我们需要理解`hover`事件。在...
通过以上步骤，我们可以实现一个简单但有效的鼠标滑过表格时动态高亮显示效果。这个技术不仅可以提高用户的导航体验，也可以在数据密集型的表格中帮助用户更轻松地追踪和理解数据关系。在实际项目中，还可以结合其他...
本示例中，我们探讨的是如何使用JavaScript实现一种特殊效果：当鼠标滑过时，导航菜单会高亮显示，并呈现出3级纵向结构，背景色为浅绿色。这种效果可以提升用户体验，使用户更容易识别和访问网站的不同部分。 首先...
- 鼠标悬停（`:hover`）状态下，我们可以为`<tr>`定义一个类，例如`.hover`, 并设置背景色等样式，使得鼠标经过时行变高亮。例如： ```css tr.hover { background-color: #f0f0f0; /* 或者其他您选择的颜色 */ ...
在CSS3中，实现鼠标移上图片高亮效果是一种常见的交互设计手法，它可以提升用户体验，使网站或应用更具吸引力。这个效果通常是通过结合使用CSS的选择器、伪类以及图像处理属性来实现的。下面我们将详细探讨如何利用...
本文将主要探讨在处理“鼠标经过”事件以及实现元素高亮显示时遇到的问题，并提供相应的解决方案。文章可能基于一个HTML示例，如"鼠标经过表格高亮显示.html"，这个文件可能是用来演示如何在浏览器的不同环境下使...
摘要:脚本资源,jQuery,jFade,图片渐显 jFade图像特效处理插件，基于jQuery的图片特效，鼠标经过图标高亮显示，也就是图片渐显效果。用jquery制作相册的时候，是一个不错的特效，网上使用挺广泛的。
本主题聚焦于"jQuery鼠标滑过产品图片背景高亮闪烁显示"这一功能，这通常用于电商网站或者产品展示页面，当用户鼠标悬停在某个产品图片上时，图片背景会变得醒目并伴有闪烁效果，吸引用户的注意力。 jQuery是一个轻...
"鼠标经过选项卡菜单高亮显示图文变换js特效代码"是一个常见的网页元素，尤其适用于企业网站和商城网站，它能够提升用户的浏览体验，使用户更容易理解和操作网站内容。下面将详细解释这个特效的实现原理和涉及的技术...
本教程将深入探讨如何利用jQuery创建炫酷的鼠标滑过菜单时高亮菜单项的动画特效。 首先，我们需要在HTML结构中设置基础的菜单布局。一个常见的菜单结构可能如下： ```html <li><a href="#">菜单1</a></li> <li>...
jQuery作为一个强大的JavaScript库，提供了丰富的功能来增强用户体验，其中就包括了“鼠标经过图片高亮显示”的效果。这种效果可以吸引用户的注意力，使得导航更加直观和互动。下面我们将深入探讨如何使用jQuery实现...
总结一下，这个JavaScript实现的鼠标滑过高亮显示纵向三级米灰色导航菜单，主要涉及以下几个技术点： 1. HTML结构设计，构建菜单的层次关系。 2. CSS样式设定，包括背景颜色、布局和默认样式。 3. JavaScript事件...
通过上述代码，当用户的鼠标滑过这些图片项时，图片会通过改变透明度的方式达到高亮显示的效果。这种效果在网页设计中经常被用于吸引用户的注意力，增强用户的交互体验。 需要注意的是，为了使代码能够正常运行，...