Lassen Sie ein Bild bei Hover mit Jquery erscheinen

Question

Ich schaute mich online um und konnte keine spezifische Antwort oder Anleitung finden, was ich mit meiner Hover-Navigation machen möchte; Das meiste, was ich fand, war jquery, das für eine Bildanimation oder Hintergrundbildanimation kodierte.

Meine Navigation ist im Moment mit einem Überblenden auf eine andere Farbe über den Mauszeiger eingestellt. Was ich auch tun möchte, ist, dass, wenn jemand über die Navigation schwebt, nicht nur der Link zu einer anderen Farbe verblasst (was ich gerade arbeite), ich möchte auch ein Pfeilbild, das ich links neben dem Text erscheinen lassen muss . Ich würde es lieben mit dem Text zu verblassen, aber wenn das unmöglich ist, bin ich nicht wählerisch. Um zu verdeutlichen, möchte ich nicht, dass der Pfeil angezeigt wird, wenn die Verbindung nicht über die Verbindung läuft.

Wenn es überhaupt hilft, hier ist die aktuelle Fading jquery Ich habe:

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(); 
}); 

Hier ist die CSS für die Navigation ist:

#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; 
} 

Der Pfeil Bild, das ich erscheinen soll ist " Bilder/arrow.png ". Ich glaube für diese Art von Sache würde ich den png-Fehler in meinen Code für IE setzen müssen, ja? Wenn ich etwas in meinen aktuellen HTML-Code schreiben müsste, lassen Sie es mich wissen. Danke im Voraus!

Answer 1

‚Klar‘ zu kopieren,

Unten sollten Sie geben, was Sie fordern. Es ist ein bisschen komplizierter als meine früheren Code ist als es versucht, den Text vertikal und horizontal zu zentrieren, lass mich wissen wie du bist mach weiter.

Die CSS, jQuery Javascript und HTML ist:

<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

Ich würde vorschlagen, eine leere span oder ein Div-Container in Ihrem Code, um das Pfeilbild zu halten. Sie können dann einen JQuery-Selektor verwenden, um diese einzublenden, wenn das Hover-Ereignis für die Links aufgerufen wird.

Sie haben bereits fadeTo in Ihrem Code für das, was ich vermute, sind die Links, fügen Sie einfach den Code dort zum Einblenden der Pfeile auch mit dem CSS-Selektor für die Spannen oder Divs, die die Pfeile darstellen werden.

Answer 3

'Klar',

Nachfolgend finden Sie einige einfache Code ähnlich dem, was ich benutze. Es funktioniert gut, wenn die Höhe Ihres Pfeilbildes kleiner oder gleich der Höhe des Textes in der Verknüpfung ist.

Vielleicht könnten Sie es für Ihre Zwecke ändern. Als beiseite, beachten Sie die Verwendung von einfachen Anführungszeichen (') und doppelten Anführungszeichen ("), die mit zu müssen beseitigt‚Flucht‘Ihre doppelten Anführungszeichen.

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

mit dem Dadurch entfällt‚span‘s , absolute Positionierung und mit der HTML usw.

Grüße Neil

Answer 4

Dies wird mein letztes Wort zu diesem Thema sein. Wenn Sie nicht abgeneigt sind, eine Tabelle anstelle von divs zu verwenden, gibt es eine viel einfachere Lösung. Das CSS nimmt ein 32 Pixel hohes Bild an. Sie müssen es ändern, wenn Ihr Pfeilbild eine andere Höhe hat.

Grüße Neil

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