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

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

你已经在代码中使用了fadeTo，因为我猜测的是链接，只需在那里添加代码以淡入箭头，使用CSS选择器来代表箭头的跨度或div。

Answer 2

'清除'，

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

也许你可以修改它以适合你的目的。另外，请注意使用单引号（'）和双引号（“），这样就不必”转义“双引号。

$('.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];
        }
    );
});

这取消了“span”，绝对定位和必须复制HTML等。

问候尼尔

Answer 3

'清除'，

下面应该为您提供所要求的内容。它比我之前的代码要复杂一些，因为它试图使文本在纵向和横向都居中。让我知道你是如何继续下去的。

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 4

这将是我在这个问题上的最后一句话。如果你不反对使用表而不是div，那么有一个更简单的解决方案。 CSS假设图像高32px。如果您的箭头图像高度不同，则必须更改它。

此致尼尔

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

使用Jquery在悬停时显示图像

4 个答案: