我一直在学习如何制作 Jquery 鼠标悬停效果 http://bavotasan.com/2009/creating-a-jquery-mouseover-fade-effect/
如何让三个独立的按钮具有这种效果?当我复制 Div 时,我一直遇到 Div 重叠的问题,并且无法将它们移开。抱歉,如果我最初的问题令人困惑! 这是我的jsfiddle: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>
最佳答案
这是一个 fiddle ,应该可以让您走上正确的道路:
<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; }
关于javascript - jQuery 鼠标悬停淡入淡出效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12197605/