per Hover Bild anzeigen mit JQuery. Falsche Reihenfolge

Jan-Frederik Stieler

Jan-Frederik Stieler

Monsterator
Moderator
Hi,
ich möchte mit JQuery auf einem Span mit hover ein Bild einblenden welches im img-element definiert ist.
Bei mir hat das leider noch die falsche Reihenfolge. da wird das Bild beim Link direkt angezeigt und erst beim Hover ausgeblendet.

Code: 
$("span").hover(
  function () {
    $(this).prev($("img"));
  },
  function () {
    $(this).prev("img").remove();
  }
);
hier der Beispielcode
HTML: 
<ul class="menu-uebersichtmenu" id="uebersicht">
    <li class="item17"><a href="http://www.google.de" title="Birkenhof">
      <img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" alt="birkenhof" />
      <span>Birkenhof</span>
      </a>
    </li>  
</body>

Viele Grüße
 
da wird das Bild beim Link direkt angezeigt und erst beim Hover ausgeblendet.
Zum Vergrößern anklicken....

Warum sollte das auch nicht so sein? Das Bild ist von Anfang an sichtbar und sobald du span nicht mehr "hoverst" wird es ausgeblendet.

Gib dem img doch mal beispielweise ein display:none mit.

Javascript: 
$("span").hover(
/*handlerIn function*/
  function () {
    $(this).prev("img").fadeIn("slow");
  },
/*handlerout function*/
  function () {
    $(this).prev("img").remove();
  }
);

Könnte allerdings zu problemen führen wenn das Bild beim fadeIn das span soweit verschiebt das du nicht mehr hoverst.
 
Doch tuts schon das Problem ist nur (wie bereits von mir angesprochen) folgendes:
Beim hover über span wird das Bild angezeigt.
Durch das anzeigen des Bildes wird allerdings dein span verschoben.
Durch dieses verschieben des span, hoverst du nicht mehr über selbigem wodurch sofort die handlerOut funktion gerufen wird, die zur folge hat das das img gelöscht wird.
Das ganze geht so schnell das du garnicht mitkriegst das die handlerIn funktion überhaupt gerufen wird.

Testen kannst du das ganz einfach indem du aus dem remove() ein fadeOut("slow") machst.
Oder $(this).prev("img").remove(); einfach mal auskommentierst.

Umgehen kannst du das logischerweise indem du dafür sorgst das das einblenden des Bildes dein span nicht mehr verschiebt.
 
Hi,
erstmal danke. Ist schon doof wenn das Ganze so schnell on stadten geht das man das nicht beurteilen kann :).
Ich hab das jetzt noch etwas angepasst. So das das Bild in das DIV geladen werden soll. Funktioniert aber natürlich wieder nicht.
Wäre nett wenn sich das Script mal jemand anschauen könnte?
Javascript: 
$(document).ready(function(){
  $('li').hover(
/*handlerIn function*/
  function () {
    $('#hoverpos').load(function(){
       $('.image').show();         
  },
/*handlerout function*/
  function () {
    $('.image').hide();  }
   );}

HTML: 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
 <style>
   #hoverpos
   {
     position:absolute
     width: 240px;
     height: 160px;
   }
   img
   {
     display:none;
   }   
  </style>
</head>
<body>
  <div id="hoverpos">
    
  </div>
  <ul class="menu-uebersichtmenu" id="uebersicht">
    <li class="item17"><a href="http://www.google.de" title="jquery"><img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg" width="240" height="160" class="image" alt="" />
      <span>google17</span>
      </a>
    </li>
    <li class="item18"><a href="http://www.google.de" title="jquery"><img src="http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg" width="240" height="160" class="image" alt="" />
      <span>google18</span>
      </a>
    </li>
</body>
</html>
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück