jqeury Hover Frage

[Cool Master]

Hallo,

also ich habe ein kleines Problem. Ich möchte ein Div mit class="helloworld" verschwinden lassen soblad ich mit der Maus über ein <img> Element fahre. Gehe ich von dem <img> wieder runter soll der Div mit der class="helloworld" wieder erscheinen.

Nun meine Frage: Wie stell ich das an? Ich habe mir mal das angeschaut:

http://api.jquery.com/hover/

Aber so richtig schlau werde ich nicht davon. Hoffe ihr könnt mir helfen

Grüße,

Cool Master

 

[Rain]

Hi!

$(element).hover(
function() {
ausblenden
},

function() {
einblenden
}
);

Viele Grüße

 

[Cool Master]

Hmm müsste doch:

$("img").hover(
  function () {
    $(".helloworld").hide();
  }, 
  function () {
    $(".helloworld").show();
  }
);

sein oder?

 

[Yuuri]

Genau anders rum:

hover( handler[B]In[/B](eventObject) , handler[B]Out[/B](eventObject)  )

$('img').hover(
  function() { $('div.helloworld').fadeOut(); },
  function() { $('div.helloworld').fadeIn(); }
);

Ungetestet.

 

[Cool Master]

Hmm also ich habe nun alles getestet kein Erfolg. Ich habe sogar img mit a ersetzt da die Bilder auf "#" verlinken keine chance es passiert einfach nichts.

Das hier geht ohne Probleme:

  $(function(){
    $(".helloworld").hide();
  });

 

[PEASANT KING]

Wie sind die Bilder denn eingebunden ?
So <div id="bla"><a href=""></a></div> also im css hinterlegt ?
Oder mittels <img> Tag ?

 

[Cool Master]

Es sind Thumbnails welche so eingebunden sind:

<div id="galerie-right" class="galerie">
     <div class="pic-navi">
        <a href="#" id="pic1">
           <img src="/media/images/neubau/thumbs/haus1/01.jpg"> <!-- Thumb -->
           <span></span>
        </a>

Edit:

die id="pic1" Ist das große Bild und wird per span angezeigt.

 

[Rain]

schau mal hier:

http://jsfiddle.net/VBnB7/

 

[PEASANT KING]

Blödsinn was red ich da, scheint ja alles in Ordnung zu sein.

 

[Cool Master]

@Rain

genau so habe ich es ich verstehe nicht waum es nicht geht

 

[Rain]

poste mal den entsprechenden Javascript Code

 

[Yuuri]

Jap, gib mal bitte ein wenig mehr Code oder einen Link wenn möglich.

 

[Cool Master]

Siehe Post Nr: 3

Aber hier noch mal:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$("img").hover(
    function () {
        $("div.helloworld").hide();
    },
    function () {
        $("div.helloworld").show();
    }
);
</script>

Link kann ich leider keinen Posten da Website per CMS bei mir Lokal mit einem Developer Server am laufen ist.

Das div.helloworld hatte ich schon auch nur .helloworld kein erfolg.

 

[Rain]

Du deklarierst die Funktion sicher am Anfang deines HTML Documents. Zu diesen Zeitpunkt existiert noch kein img.

Pack mal um alles ein:

$(document).ready(function() {

.....

}

 

[Cool Master]

Leider auch kein Erfolg

 

[Rain]

Hm ganz schönes Rätsel raten

Ich empfehle dir mal ein neues (leeres!) HTML Dokument zu erstellen, die gewünschten Objekte samt Funktionen reinzupacken und zu testen ggf. zu debuggen (zB statt dem ausblenden der Objekte nur ein alert('') ).

Den kompletten Code des Dokuments könntest du dann hier nochmal posten

 

[Cool Master]

Alles klar mach ich mal eben

Ergänzung (20. März 2012)

So im Anhang befinden sich die Bilder, CSS und HTML.

Wie man sehen kann geht es um das Problem mit den Vertikalen Bildern. Da möchte ich das .helloworld nicht sichtbar ist.

 

[Rain]

Also, mit Firebug folgende Erkenntnis:


Um die hover-Funktion muss das document.ready(), damit verschwindet auch .helloworld, sobald du über eines deiner Thumbnails fährst. Das kannst du testen, indem du über ein Hochkant-Thumbnail fährst. Ohne das ready bleibt im Hintergrund das Standardbild (per CSS als Hintergrundbild für .helloworld), mit ready verschwindet das bild ( = .helloworld verschwindet).

.helloworld hat ein background-image, dieses müsstest bei der hover-funktion ebenfalls verschwinden lassen (per $('.helloworld').css('background-image', '') ) und beim mouseout wieder einblenden lassen, um Hochkantbilder (Zentrierung?!) ordentlich anzeigen zu lassen

Nochwas: Du bindest 2 mal jQuery in 2 verschiedenen Versionen ein, der Ordner /media/... existiert nicht (zumindest in der Ordnerstruktur die du online gestellt hast)!

 

[Cool Master]

jo wie gesagt die Page liegt in einem CMS da gibt es den Ordner /media/

Also muss es nun so sein?:

$document.ready(function(){
    ("img").hover(
        $(document).ready(function() {
            $(".helloworld").hide();
        },
        $(document).ready(function() {
            $(".helloworld").show();
        }
});

 

[Yuuri]

Ein

$(document).ready( function()
{
  $('img').hover(
    // ...
  )
} );

reicht aus.