使用Jquery悬停图像 [英] Make an image appear on hover with Jquery

问题描述

我在网上环顾四周，无法找到具体的答案或教程，说明我希望如何使用悬停式导航;我发现的最多的是为图像动画或背景图像动画编写的jquery。

I looked around online and could not find a specific answer or tutorial on what I would like to do with my hover navigation; The most I found was jquery coding for an image animation or background image animation.

我的导航目​​前设置为淡入淡出色到悬停在不同颜色时刻。我想要做的也是，当有人悬停在导航上时，链接不仅会淡出到不同的颜色（我正在工作），而且我还想要一个箭头图像，我必须显示在文本的左侧。我喜欢它也会随着文本消失，但如果这不可能，我就不挑剔。为了澄清，我不希望箭头显示链接没有被展开时。

My navigation at the moment is set up with a fade to a different color over hover at the moment. What I would like to do also is that when someone hovers over the navigation, not only does the link fade to a different color (Which I have working), but I also want a arrow image I have to appear to the left of the text. I'd love for it to fade with the text too, but if thats impossible, I'm not picky. To clarify, I do not want the arrow to be shown when the link is not being hovered over.

如果它有帮助，这里是目前的褪色jQuery我有：

If it helps at all, here is the current fading jquery I have:

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的错误放入IE的编码中，是的？另外，如果我需要在我的实际html中添加一些内容，请告诉我。

The arrow image I want to appear is "images/arrow.png". I believe for this type of thing I'd need to put the png bug in my coding for IE, yes? Also, if I'd need to put something in my actual html for this, let me know. Thanks in advance!

推荐答案

'Cloudy'，

给你你要求的东西。它比我以前的代码稍微复杂一些，因为它试图垂直和水平地居中文本。

Below should give you what you are asking for. It is a bit more complicated than my earlier code as it tries to centre the text, both vertically and horizontally. Let me know how you get on with it.

CSS，jQuery Javascript和HTML是：

The CSS, jQuery Javascript and HTML are:

<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>

这篇关于使用Jquery悬停图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！