使用Jquery在hover时显示图像

我在网上浏览了一下，找不到我想用hover导航做什么的具体答案或教程; 我发现的最多是jquery编码图像动画或背景图像动画。

此刻我的导航设置为在淡入淡出时淡化为不同的颜色。 我还想做的是，当有人在导航上盘旋时，不仅链接会淡化为不同的颜色（我已经工作了），但我还想要一个箭头图像，我必须出现在文本的左侧。 我也喜欢它随着文本消失，但如果那不可能，我不挑剔。 为了澄清，我不希望在链接没有hover时显示箭头。

如果它有帮助，这里是我目前的淡入淡出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(""+ html +""); $(this).append(""+ html +""); 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是：

     $('#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(''); $('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}); } ); });   
 
"Minified" slimbox.js 
slimbox2_full.js  
slimbox2.css  
 
 

Answer 2

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

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

Answer 3

‘多云的’，

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

也许您可以修改它以适合您的目的。 顺便说一句，请注意使用单引号（’）和双引号（“），这样就不必”转义“双引号。

 $('.navlink').each(function(){ $(this).hover( function(){ $(this).css({backgroundColor: "#F00", color: "#00F"}) .prepend(''); } , function(){ $(this).css({backgroundColor: "#0F0", color: "#F00"}); $('img', this).remove()[0]; } ); }); 

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

问候尼尔

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 --------------------------- 
 
 
Link 1
 
Link 2
 
Link 3