per Hover Bild anzeigen mit JQuery. Falsche Reihenfolge @ tutorials.de: Tutorials, Forum & Hilfe

**Jan-Frederik Stieler** · 14.03.10 03:19

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

<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.03.10 08:47

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.

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

**Jan-Frederik Stieler** · 14.03.10 12:44

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.03.10 12:53

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.03.10 19:35

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?

Code javascript:

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

HTML-Code:

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

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

jQuery- hover mit fade effekt

hover jquery

Hover bei Text Link soll Bild in Div anzeigen

DataGridColumn zeigt falsche Reihenfolge

Hover Menü und Bild Hover

E-Mail:

Abonnieren Abbestellen