Announcement

Collapse
No announcement yet.

JQuery: hover

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    JQuery: hover

    Ich versuche ein bisschen mit jquery rum und stoße schon bei diesem kleinen fuzzel auf probleme:
    Code:
    <html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script>
$('#blub').hover(
       function(){ $(this).addClass('testhover') },
       function(){ $(this).removeClass('testhover') }
)
</script>
<style type="text/css">

.test{
background: #030303;
}
.testhover{
background: #656565;
}

</style>
</head>
<body>
<div class="test" id="blub">Hallo</div>
</body>
</html>
    Was mache ich falsch?
    Tags: None
  • #2
    Was mache ich falsch?
    Nicht anzugeben, was dein Problem ist

    Wahrscheinlich wird es

    Code:
    $(document).ready(function() {
$('#blub').hover(
       function(){ $(this).addClass('testhover') },
       function(){ $(this).removeClass('testhover') }
)
});
    sein; das JQuery wird ausgeführt, noch bevor die Seite geladen ist und somit JQuery noch gar nicht weiss, wer "#blub" ist, und damit keine Bindung erfolgt
    Zuletzt editiert von Christian Marquardt; 16.04.2012, 18:51.
    Christian

    Comment

    • #3
      Jap ist garantiert so, weil das Skript direkt beim Seitenladen ausgeführt wird. Wenn Dus nach den Elementen im Html hinschreibst, werden diese zuerst im Dom gerendert und dann funktionierts auch.

      So quasi:

      Code:
      <html>
<head>
<script src="jquery.js" type="text/javascript"></script>

<style type="text/css">

.test{
background: #030303;
}
.testhover{
background: #656565;
}

</style>
</head>
<body>
<div class="test" id="blub">Hallo</div>
<script>
$('#blub').hover(
       function(){ $(this).addClass('testhover') },
       function(){ $(this).removeClass('testhover') }
)
</script>
</body>
</html>
      So etwas ist durchaus auch zulässig. Vor allem ist es auch wesentlich performanter als DOM Ready. Trotzdem ist es gerade als Neuling empfehlenswert die Geschichte ins DOM Ready zu packen, weil der Code dadurch sauberer wird

      Comment

      • #4
        Danke.

        @Marquardt: Gelobe Besserung.

        Comment

        Previous template Next
        Working...
        X