Question

这可能已经被问了很多，我看到了很多不同的解决方案，其中一些我不能自己工作。

我的目标是建立一个菜单，但是要开始，首先让一个按钮工作是个好主意，是吗？

所以我尝试按照Dragon Interactive教程

进行操作

继承我的代码：

CSS：

#navigation a { 
    position: relative; 
    }

#navigation a .hover {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    }

使用Javascript：

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$(".hover").css({'opacity':'0'});
$('#navigation li a').hover(function() {

    // Stuff that happens when you hover on
    $('.hover').animate({
        'opacity': 1
        }, 700)

},function() {

    // Stuff that happens when you unhover
    $('.hover').animate({
        'opacity': 0
        }, 700)

});
});


</script>

当然还有HTML标记。

<p>
Just some random giberish here, to make sure the positioning
<br>
works regardless of what junk I have before and after it. :)
</p>

<ul id="navigation" style="list-style-type: none; list-style-position:outside;">
<li>
<a href="http://google.com"><img id="btn1" border="none" src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan.png" />
</a><span class="hover"><img src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan_MO.png" /></span>
</li>

</ul>

我尝试过改变不同的参数，但我完全迷失了。

我应该使用div，并为背景图像添加动画效果吗？这会产生相同的“img”链接效果，还是只是编码不好？

基本上，我所要求的是一个可复制的最小解决方案。：）

Answer 1

您在两个函数上调用相同的事件。每个都是悬停事件。也许你应该尝试像mouseover和mouseout这样的不同事件吗？

Answer 2

有很多方法可以实现此效果，例如pure CSS3 approach或您采用的JavaScript方法。如果您有特定的浏览器要求，则JavaScript方法可能是最佳选择。

现有代码中的问题是，当光标为hovering时，动画事件将不断触发。您应该查看mouseenter()和mouseleave() jQuery事件以及stop（），以便快速进入和离开<a>不会排队大量的淡入/淡出动画。

您遇到的另一个问题是，未悬停的<img>和悬停的<img>彼此相邻。这是一种更好的方法，可以在没有JavaScript悬停效果的情况下保持HTML简单易用。因此，将一个<img>标记与非悬停的src一起使用，并在JavaScript中操纵src和不透明度以创建悬停效果。

修改：这只是one way。它首先由<img> position:relative开始工作，这归因于<a>上父position:absolute和<img> _MO的组合$('#navigation li a img').each(function(index) { $(this).clone().css({'opacity':0}).attr('src', $(this).attr('src').replace('.png','_MO.png')).appendTo($(this).parent()); });克隆直接在原始的顶部。然后激活克隆的不透明度。它依赖于始终以<img>结尾的 hovered 图像。这是一种不引人注目的方式，因为没有JavaScript的用户（他们仍然存在！）将拥有干净的单一图像HTML。

另一种方法可能是使用clone()，但您仍然可以解决褪色问题。

有很多浏览器支持CSS3方法，Firefox 4 +，Chrome，Safari，Opera，IE9。根据我的经验，您的目标受众经常要求在此类开发方面采取何种方法。

编辑2：代码澄清......

<a>

...获取<img>的每个src后代，首先克隆<img>元素，然后将不透明度设置为0（隐藏），然后更改<a>属性克隆到 hovered 版本的映像，然后将克隆的DOM元素添加为DOM中$('#navigation li a img').each(function(index) { var clonedImgElement = $(this).clone(); var parentAnchorElement = $(this).parent(); var originalSrc = $(this).attr('src'); var hoveredSrc = originalSrc.replace('.png','_MO.png'); clonedImgElement.css({'opacity':0}); // hide clone first clonedImgElement.attr('src', hoveredSrc); // update the src to the hovered version clonedImgElement.appendTo(parentAnchorElement); // attach clone to anchor in DOM });父节点的子节点，即$('#navigation li a').mouseenter(function() { $(this).find('img').filter(':last').stop().animate({'opacity':1}); }).mouseleave(function() { $(this).find('img').filter(':last').stop().animate({'opacity':0}); });。它利用了CSS sprites，但可以明确地写成：

top:0;left:0

编辑3：

您也可以用以下内容替换悬停代码：

{{1}}

根据jQuery chaining提供更好的效果。

编辑4 :last以处理其他容器中的图片，现在只定位克隆而不是所有图像，以便仍然存在非悬停图像在正常页面流中，也适用于不在{{1}}

的图像

Answer 3

看起来你走在正确的轨道上，但错过了几件事：

hover span应位于a nchor标记内：

<a href="http://google.com">
   <img id="btn1" border="none" 
       src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan.png" />
   <span class="hover">
       <img src="https://dom28edjsbv6i.cloudfront.net/Images/GetPlan_MO.png" /> 
   </span>
</a>

hover范围应位于初始图像的正上方：

    #navigation a .hover {
        display: block;
        position: absolute;
        top: -45px;
        left: 0;
        height: 100%;
        width: 100%;
        }

这是您的调整解决方案：http://jsfiddle.net/W8KMe/3/

jQuery Image翻转淡入淡出

3 个答案: