# per Hover Bild anzeigen mit JQuery. Falsche Reihenfolge



## Jan-Frederik Stieler (14. März 2010)

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.


```
$("span").hover(
  function () {
    $(this).prev($("img"));
  },
  function () {
    $(this).prev("img").remove();
  }
);
```
hier der Beispielcode

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


----------



## rd4eva (14. März 2010)

> da wird das Bild beim Link direkt angezeigt und erst beim Hover ausgeblendet.



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.


```
$("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.


----------



## Jan-Frederik Stieler (14. März 2010)

Hi,
das img hatte ich auf display:none gesetzt gehabt. Aber dann funktionierte garnichts mehr.
Deshalb dachte ich ich müßte das Script umdrehen.
Ich hab das mal in JSBin veröffentlicht (http://jsbin.com/ucuri3/2/edit).
Bei mir hovert auch mit deiner Änderung nichts.

Viele Grüße


----------



## rd4eva (14. März 2010)

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.


----------



## Jan-Frederik Stieler (14. März 2010)

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?

```
$(document).ready(function(){
  $('li').hover(
/*handlerIn function*/
  function () {
    $('#hoverpos').load(function(){
       $('.image').show();         
  },
/*handlerout function*/
  function () {
    $('.image').hide();  }
   );}
```


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


----------

