Anzeige

jQuery / Hover / CSS

jQuery / Hover / CSS | PSD-Tutorials.de

Erstellt von mfwenzel, 07.04.2010.

  1. mfwenzel

    mfwenzel Nicht mehr ganz neu hier

    Dabei seit:
    22.06.2008
    Beiträge:
    130
    Geschlecht:
    männlich
    jQuery / Hover / CSS
    Moin,

    hab eine Frage zu einem Script:

    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6. <title>Animated Menu Hover 1</title>
    7.  
    8. <script type="text/javascript" src="jquery.js"></script>
    9.  
    10. <script type="text/javascript">
    11. $(document).ready(function(){
    12.  
    13.     $(".menu a").hover(function() {
    14.         $(this).next("em").animate({opacity: "show", top: "-450"}, "slow");
    15.     }, function() {
    16.         $(this).next("em").animate({opacity: "hide", top: "-450"}, "fast");
    17.     });
    18.  
    19.  
    20. });
    21. </script>
    22.  
    23. <style type="text/css">
    24. body {
    25.     margin: 10px auto;
    26.     width: 570px;
    27.     font: 75%/120% Arial, Helvetica, sans-serif;
    28. }
    29. .menu {
    30.     margin: 500px 0 0;
    31.     padding: 0;
    32.     list-style: none;
    33. }
    34. .menu li {
    35.     padding: 0;
    36.     margin: 0 2px;
    37.     float: left;
    38.     position: relative;
    39.     text-align: center;
    40. }
    41. .menu a {
    42.     padding: 14px 10px;
    43.     display: block;
    44.     color: #000000;
    45.     width: 144px;
    46.     text-decoration: none;
    47.     font-weight: bold;
    48.     background: url(button.gif) no-repeat center center;
    49. }
    50. .menu li em {
    51.     width: 701px;
    52.     height: 401px;
    53.     position: absolute;
    54.     top: -85px;
    55.     left: -15px;
    56.     text-align: center;
    57.     padding: 20px 12px 10px;
    58.     font-style: normal;
    59.     z-index: 2;
    60.     display: none;
    61.     background-image: url(biere.png);
    62.     background-repeat: no-repeat;
    63. }
    64. </style>
    65. </head>
    66.  
    67. <body>
    68.  
    69. <ul class="menu">
    70.   <li><a href="http://www.irgendwas.com">Irgendwas</a><em></em></li>
    71. </ul>
    72.  
    73. </body>
    74. </html>
    75.  
    Und zwar möchte ich eine Grafik als Hover Effekt in einer bestimmten Position über dem Button plazieren.

    Leider versagen meine Künste und ich bekomme es nicht hin, das Image richtig zu positionieren...

    Weiß jemand wodran ich schrauben muss?

    Danke schon mal!

    Matthias
     
    #1      
  2. kleinercoop

    kleinercoop einfach, coop

    Dabei seit:
    16.11.2007
    Beiträge:
    739
    Geschlecht:
    männlich
    Ort:
    Duisburg
    Software:
    CS 3 Bundle / Cienma 4D 10 / Sony Vegas 6
    Kameratyp:
    Canon 450D
    jQuery / Hover / CSS
    AW: jQuery / Hover / CSS

    hover doch "nur" via css?

    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    6. <title>Animated Menu Hover 1</title>
    7.  
    8. <style>
    9.  
    10. li {
    11.     background-color:#FF0000;  
    12.     display:inline;
    13.     padding:10px;
    14.    
    15. }
    16.  
    17. li:hover {
    18. background-color:#00FF66;  
    19. }
    20.  
    21. </style>
    22.  
    23. </head>
    24.  
    25. <body>
    26.  
    27. <ul class="menu">
    28.   <li><a href="http://www.irgendwas.com">Irgendwas</a><em></em></li>
    29. </ul>
    30.  
    31. </body>
    32. </html>
    33.  
    wenn du ein bild hoven lassen willst, muss du im css einfach background-color:#FF0000; mit background-image:url(deinbild.jpg) austauschen

    lg

    edit: ups du willst das bild gar nicht hinter dem button haben.. ? falsch verstanden... mh dann doch viq jQ :(
     
    Zuletzt bearbeitet: 07.04.2010
    #2      
  3. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    jQuery / Hover / CSS
    AW: jQuery / Hover / CSS

    Ich vermute mal, du willst hier statt dem Minus keines haben?
    PHP:
    1.  
    2.     $(".menu a").hover(function() {
    3.         $(this).next("em").animate({opacity: "show", top: "450"}, "slow"); //statt -450
    4.     }, function() {
    5.         $(this).next("em").animate({opacity: "hide", top: "-450"}, "fast");
    6.     });
    7.  

    Duddle
     
    #3      
  4. mfwenzel

    mfwenzel Nicht mehr ganz neu hier

    Dabei seit:
    22.06.2008
    Beiträge:
    130
    Geschlecht:
    männlich
    jQuery / Hover / CSS
    AW: jQuery / Hover / CSS

    @kleinercoop genau!
    @Duddle dann rastet das teil komplett aus ;)
     
    #4      
  5. TheRealSephiroth

    TheRealSephiroth Whaleman

    Dabei seit:
    29.03.2006
    Beiträge:
    98
    Geschlecht:
    männlich
    Ort:
    Kärnten - Österreich
    Software:
    PS CS4, PSPad
    jQuery / Hover / CSS
    AW: jQuery / Hover / CSS

    Statt animate() könntest doch show() und hide() nehmen, oder ned?
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    jQuery / Hover / CSS
    AW: jQuery / Hover / CSS

    hallo mfwenzel,
    dein markup hat ein Paar logische fehler, und die Struktur ist zumindest fragwürdig.
    <em> ist ein inline Element und deshalb ist die zuweisung von height und width nicht möglich.
    wenn du oberhalb der liste einen Platz in der Höhe von 500px brauchst, in dem eine (hover)grafik anzeigt werden kann/soll, ist es vielleicht sinnvoller schon vorab diesen Platz mit einem Div zu belegen, statt mit einem Margin.
    HTML:
    1.  
    2. <div id="hoverImgContaner" style="height:400px; margin-top: 100px;>
    3. <ul class="menu">
    4.   <li><a href="http://www.irgendwas.com">Irgendwas</a></li>
    5. </ul>
    6.  
    so wird die Sache mit dem Bild ein/ausblenden auch sehr viel einfacher:

    Code (Text):
    1.  
    2. $("#hoverImgContainer img").css("display","none");
    3. $("a").hover(function(){
    4.   $("#hoverImgContainer").html('<img src="biere.png" />');
    5.   $("#hoverImgContainer img").fadeIn(500);
    6.   },function(){
    7.   $(#hoverImgContainer img").fadeOut(300, function(){
    8.     $(#hoverImgContainer img").remove();
    9.     });
    10.   });
    11. });
    12.  
    nur mal auf die Schnelle ein Ansatz
    mit fadeIn() und fadeOut() hast du praktisch die selbe funktion, wie mit der coustom animation der opacity.

    ich hoffe ich hab nicht zu vile Fehler eingebaut, aber wenig Zeit, schaue später nochmal rein.
     
    #6      
  7. mfwenzel

    mfwenzel Nicht mehr ganz neu hier

    Dabei seit:
    22.06.2008
    Beiträge:
    130
    Geschlecht:
    männlich
    jQuery / Hover / CSS
    AW: jQuery / Hover / CSS

    @sokie

    vielen dank schon mal! nur: wie baue ich den 2. teil deines posts ein... und vorallem wo?
     
    #7      
  8. Llynyania

    Llynyania Benutzertitel aberkannt

    Dabei seit:
    12.08.2008
    Beiträge:
    208
    Geschlecht:
    weiblich
    Kameratyp:
    Nikon D2Xs, Canon400D
    jQuery / Hover / CSS
    #8      
  9. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    jQuery / Hover / CSS
    AW: jQuery / Hover / CSS

    der Code muss natürlich innerhalb der .ready(function(){}) stehen.
     
    #9      
x
×
×