使用 Jquery 使图像出现在悬停时

Question

我在网上环顾四周，找不到关于我想用悬停导航做什么的具体答案或教程；我发现最多的是用于图像动画或背景图像动画的 jquery 编码。

我目前的导航设置为悬停时淡入不同的颜色。我还想做的是，当有人将鼠标悬停在导航上时，链接不仅会淡出为不同的颜色（我正在工作），而且我还想要一个箭头图像，我必须出现在文本的左侧。我希望它也能随着文字一起消失，但如果这是不可能的，我也不挑剔。澄清一下，我不希望当链接未悬停时显示箭头。

如果它有帮助的话，这是我当前的褪色jquery：

this.fadeLinks = function() {   

var selector = "#nav1 a"; 
var speed = "slow" 

var bgcolor = "#6c919a";    


$(selector).each(function(){ 
    $(this).css("position","relative");
    var html = $(this).html();
    $(this).html("<span class=\"one\">"+ html +"</span>");
    $(this).append("<span class=\"two\">"+ html +"</span>");        
    if($.browser.msie){
        $("span.one",$(this)).css("background",bgcolor);
        $("span.two",$(this)).css("background",bgcolor);    
        $("span.one",$(this)).css("opacity",1);         
    };
    $("span.two",$(this)).css("opacity",0);     
    $("span.two",$(this)).css("position","absolute");       
    $("span.two",$(this)).css("top","0");
    $("span.two",$(this)).css("left","0");      
    $(this).hover(
        function(){
            $("span.one",this).fadeTo(speed, 0);                
            $("span.two",this).fadeTo(speed, 1);
        },
        function(){
            $("span.one",this).fadeTo(speed, 1);    
            $("span.two",this).fadeTo(speed, 0);
        }           
    )
});
};

$(document).ready(function(){   
fadeLinks();
});

这是导航的css：

#nav1 {
width:730px;
top: -380px;
left: -2px;
font-size:20px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
color:#ffffff;
padding-top:6px;
padding-bottom:10px;
position:relative;
text-align:center;
line-height:30px;
}


#nav1 a{
font-size:30px;
font-family: Tahoma, Geneva, sans-serif;
color:#fff;
text-decoration:none;
}
 #nav1 a span.two{
color:#069;
cursor:pointer;
}

我想要显示的箭头图像是“images/arrow.png”。我相信对于这种类型的事情我需要将 png bug 放入我的 IE 编码中，是吗？另外，如果我需要为此在实际的 html 中添加一些内容，请告诉我。提前致谢！

Answer 1

“阴天”，

下面应该可以满足您的要求。它比我之前的代码稍微复杂一些，因为它试图使文本垂直和水平居中。让我知道你的进展如何。

CSS、jQuery Javascript 和 HTML 是：

<style>
#nav1 {
    float: none;
    padding: 0;
    margin: 0;
}
#nav1 div {
    float: left;
    position: relative;
    padding: 4px;
    height: 36px;
    border: 2px solid #000;
}
#nav1 div p {
    position: absolute; 
    right: 4px;   
    padding: 0 4px;
    text-align: center;
    top: 50%;
    font-size: 14px;
    margin-top: -7px;  /* negative and half the font size */
}
.clear {clear: both;}
</style>

<!--  Below is the Javascript code  -->
<!--  ############################  -->

<script type="text/javascript">
$(document).ready(function(){
</script>

$('#nav1 div').each(function(){
    var content_width = 200, arrow_width = 32;
    $('p', this).css({width: content_width, left: 0});
    $(this).css({width: content_width});
    $(this).hover(
        function(){
            var $this = $(this);
            var new_width = $this.width() + arrow_width;
            $this.css({backgroundColor: "#F00", color: "#00F", width: new_width})
                 .prepend('<img src="../images/arrow.png" alt="" />');
            $('p', this).css({left: arrow_width});
        }
        ,
        function(){
            var $this = $(this);
            var new_width = $this.width() - arrow_width;
            $('img', this).remove()[0];
            $this.css({backgroundColor: "#0F0", color: "#F00", width: new_width});
            $('p', this).css({left: 0});
        }
    );
});

<!--  Below is the HTML  -->
<!--  #################  -->

<div id="nav1">
<a href="../javascipt/slimbox2.js"      ><div><p>"Minified" slimbox.js</p></div></a>
<a href="../javascript/slimbox2_full.js"><div><p>slimbox2_full.js     </p></div></a>
<a href="../css/slimbox2.css"           ><div><p>slimbox2.css         </p></div></a>
</div>
<div class="clear"></div>

Answer 2

我建议在代码中放置一个空的 span 或 div 容器来保存箭头图像。然后，您可以使用 JQuery 选择器在链接上调用悬停事件时淡入这些选择器。

您的代码中已经有 fadeTo ，我猜测是链接，只需在其中添加代码即可淡入箭头，并使用 CSS 选择器来表示箭头的 span 或 div。

Answer 3

“多云”，

下面是一些与我使用的类似的简单代码。如果箭头图像的高度小于或等于链接中文本的高度，则效果很好。

也许您可以修改它以适合您的目的。顺便说一句，请注意单引号 (') 和双引号 (") 的使用，这消除了必须“转义”双引号的情况。

$('.navlink').each(function(){
    $(this).hover(
       function(){
            $(this).css({backgroundColor: "#F00", color: "#00F"})
                   .prepend('<img src="../icons/arrow.png" alt="" />');
        }
        ,
        function(){
            $(this).css({backgroundColor: "#0F0", color: "#F00"});
            $('img', this).remove()[0];
        }
    );
});

这消除了“跨度”、绝对定位和复制HTML 等。

问候 Neil

Answer 4

这将是我关于这个主题的最后一句话。如果您不反对使用表格代替 div，那么有一个更简单的解决方案。 CSS 假定图像高 32 像素。如果您的箭头图像的高度不同，您将必须更改它。

问候
尼尔

----------------------------------CSS --------------------

#nav2, #nav2 tbody, #nav2 tr, #nav2 td{height: 32px;}
#nav2 td{vertical-align: middle; border: 2px solid #000;  margin: 0;}
#nav2 img {display: none; height: 32px; margin: 0; padding: 0; border:0;}
#nav2 div {
              float: left;
              height: 32px;
              margin: 0;
              padding: 0;
              border: 0;
              color: #F00;
              background-color: #0F0;
          }
#nav2 p {
    float: left;
    font-size: 14px;
    padding: 9px 4px 0 4px;  /*  9px = (32-14)/2   */
    height: 23px;            /* 23px = (32-9)      */
    margin: 0;
    border: 0;
    color: #F00;
    background-color: #0F0;
}

-----------------------------  jQuery javascript --------------------

$('#nav2 a').each(function(){
    $(this).hover(
        function(){
                    $('img',    this).fadeIn();
                    $('div, p', this).css({backgroundColor: "#F00", color: "#00F"});
        }
        ,
        function(){
                    $('img',    this).fadeOut();
                    $('div, p', this).css({backgroundColor: "#0F0", color: "#F00"});
        }
    );
});

---------------------------------  HTML   ---------------------------

<table id="nav2">
    <tr>
        <td><a href="../example1.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 1</p></a></td>
        <td><a href="../example2.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 2</p></a></td>
        <td><a href="../example3.html"><div><img src="../images/arrow.png" alt=""></div><p>Link 3</p></a></td>
    </tr>
</table>