JQuery slideDown bei Mouseover und slideUp bei Mouseout

Gepostet am Juni 1, 2012

Wenn man ein Untergeordnetes Element beim Mouseover Anzeigen möchte und beim Mouseout ausblenden, sollte man wie folgt vorgehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="container" style="width:250px;">
    <div class="aktuelles" style="background-color: #ace600; width: 250px; display: block;">News</div>
    <div class="content" style="background-color: #ace600; width: 250px; display: none;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</div>
<script>
$("#container").hover(
  function () {
    $("#container .content").slideDown();
  }, 
  function () {
    $(".content").slideUp();
  }
);
 
</script>
 
</body>
</html>

Tags: , ,

Leave a Reply

 

Posts of Current Category



Facebook: