jQuery / Hover / CSS

mfwenzel · 07.04.2010

Moin,

hab eine Frage zu einem Script:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Menu Hover 1</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

    $(".menu a").hover(function() {
        $(this).next("em").animate({opacity: "show", top: "-450"}, "slow");
    }, function() {
        $(this).next("em").animate({opacity: "hide", top: "-450"}, "fast");
    });


});
</script>

<style type="text/css">
body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}
.menu {
    margin: 500px 0 0;
    padding: 0;
    list-style: none;
}
.menu li {
    padding: 0;
    margin: 0 2px;
    float: left;
    position: relative;
    text-align: center;
}
.menu a {
    padding: 14px 10px;
    display: block;
    color: #000000;
    width: 144px;
    text-decoration: none;
    font-weight: bold;
    background: url(button.gif) no-repeat center center;
}
.menu li em {
    width: 701px;
    height: 401px;
    position: absolute;
    top: -85px;
    left: -15px;
    text-align: center;
    padding: 20px 12px 10px;
    font-style: normal;
    z-index: 2;
    display: none;
    background-image: url(biere.png);
    background-repeat: no-repeat;
}
</style>
</head>

<body>

<ul class="menu">
  <li><a href="http://www.irgendwas.com">Irgendwas</a><em></em></li>
</ul>

</body>
</html>

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

kleinercoop · 07.04.2010

AW: jQuery / Hover / CSS

hover doch "nur" via css?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Animated Menu Hover 1</title>

<style>

li {
	background-color:#FF0000;	
	display:inline;
	padding:10px;
	
}

li:hover {
background-color:#00FF66;	
}

</style>

</head>

<body>

<ul class="menu">
  <li><a href="http://www.irgendwas.com">Irgendwas</a><em></em></li>
</ul>

</body>
</html>

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

Duddle · 07.04.2010

AW: jQuery / Hover / CSS

Ich vermute mal, du willst hier statt dem Minus keines haben?

PHP:

    $(".menu a").hover(function() {
        $(this).next("em").animate({opacity: "show", top: "450"}, "slow"); //statt -450
    }, function() {
        $(this).next("em").animate({opacity: "hide", top: "-450"}, "fast"); 
    });

Duddle

mfwenzel · 07.04.2010

AW: jQuery / Hover / CSS

@kleinercoop genau!
@Duddle dann rastet das teil komplett aus

TheRealSephiroth · 09.04.2010

AW: jQuery / Hover / CSS

Statt animate() könntest doch show() und hide() nehmen, oder ned?

sokie · 09.04.2010

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:

<div id="hoverImgContaner" style="height:400px; margin-top: 100px;>
<ul class="menu">
  <li><a href="http://www.irgendwas.com">Irgendwas</a></li>
</ul>

so wird die Sache mit dem Bild ein/ausblenden auch sehr viel einfacher:

Code:

$("#hoverImgContainer img").css("display","none");
$("a").hover(function(){
  $("#hoverImgContainer").html('<img src="biere.png" />');
  $("#hoverImgContainer img").fadeIn(500);
  },function(){
  $(#hoverImgContainer img").fadeOut(300, function(){
    $(#hoverImgContainer img").remove();
    });
  });
});

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.

mfwenzel · 12.04.2010

AW: jQuery / Hover / CSS

@sokie

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

Llynyania · 15.04.2010

AW: jQuery / Hover / CSS

Advanced CSS Menu

das ist wohl sowas...

Das Beispiel Advanced CSS Menu | by Web Designer Wall

Grüßle

sokie · 15.04.2010

AW: jQuery / Hover / CSS

der Code muss natürlich innerhalb der .ready(function(){}) stehen.