jQuery鼠标悬停渐变效果

jQuery mouseover fade effect

本文关键字：渐变 悬停 鼠标 jQuery      更新时间：2023-09-26

我一直在学习如何从http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/

如何使三个单独的按钮具有这种效果？当我复制它们时，我一直有一个Div重叠的问题，我无法将它们彼此分开。对不起，如果我最初的问题令人困惑！这是我的小提琴：http://jsfiddle.net/japaneselanguagefriend/EgDqy/

<div class="fadehover"><img src="button 1" alt="" class="a" /><img src="button 1 roll" alt="" class="b" /></div>
<div class="fadehover"><img src="button 2" alt="" class="c" /><img src="button 2 roll" alt="" class="d" /></div>

这是一个应该让你走上正确道路的小提琴：

http://jsfiddle.net/EgDqy/12/

<div class="cell">
<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" display /> 
<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />
</div>

<div class="cell"> 
<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 
<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />
</div>
<div class="cell"> 
<img src="http://www.charlesayoub.com/news/public/uploads/images/895377521.jpeg" alt="" /> 
<img src="http://static.ddmcdn.com/gif/smart-car-1.jpg" class="fader" alt="" />
</div>​

$(".cell").hover(
   function() {
      $(this).find('.fader').fadeOut("slow");
   },
   function() {
      $(this).find('.fader').fadeIn("slow");
   }
);

.cell{ width:100px; display:inline-block; position:relative; }
.cell img { width:100px; position:absolute; top:0; left:0; }

基本上，因为div的内部元素是绝对定位的，所以div没有任何测量值（这是一个技术术语，但我无法理解）。您基本上需要显式设置div的宽度和高度。您可以在CSS中执行此操作，也可以在javascript/jquery中动态生成CSS。下面是一个使用jquery的示例。

http://jsfiddle.net/EgDqy/13/

例子描绘了千言万语，如果其他人看到这个问题，这可能会帮助他们理解问题。点击右侧上的按钮

http://jsfiddle.net/EgDqy/16/

相关文章：