jQuery-Mouseover-CSS

Vincent Petritz · 30. März 2012, 11:58

Hallo,
ich möchte wenn man über ein Bild mit der Maus fährt das jQuery das Bild um 10px nach oben "verschiebt", machts aber nicht:

JavaScript-Quellcode

$('#karte').css('bottom', '+10px');

Grüße.

InitArt · 30. März 2012, 18:16

Ich kenne mich mit JS selbst leider nicht aus, CSS ist das jedoch nicht.

Vincent Petritz · 30. März 2012, 19:00

Doch, in jQuery kann man CSS-Befehle ausführen, daher ist das schon CSS.
Musst dir wie folgt vorstellen in CSS:

CSS-Quellcode

#karte {
bottom: +10px;
}

Und das geht halt nicht.

Maddin · 30. März 2012, 19:19

Ich glaube was InitArt meinte ist, das

CSS-Quellcode

bottom: +10px;

nicht funktioniert. Wenn dann musst du

JavaScript-Quellcode

$('#karte').css('bottom', '10px');

oder wenn du wirklich +10 willst

JavaScript-Quellcode

var bottom = $('#karte').css('bottom');
$('#karte').css('bottom', (bottom + 10) + 'px');

machen. Allerdings würde ich es eher mit margin-x versuchen.

Vincent Petritz · 30. März 2012, 19:21

Okay, danke Maddin ich versuchs! :)

dead · 31. März 2012, 13:32

Ist auch in CSS3 möglich, wenn gewünscht sogar mit "Effekten" (Fade-In/Out).

CSS-Quellcode

#karte:hover{margin:10px;}

Für die o.g. Effekte kannst du Transitions nutzen.

CSS-Quellcode

#karte{-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;-ms-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}

//Edit: Woltlab bekommt es nicht auf die Reihe, WBB an Opera anzupassen... zerhackt einem die ganze Formatierung

Vincent Petritz · 31. März 2012, 13:55

Okay, danke, soweit hab ich's, aber scheint "mouseover" nicht so ganz zu gehen, denn wenn ich mit der Maus drauf bin und dann wieder weg gehe bleibt es "aufgeklappt"...

Maddin · 31. März 2012, 14:47

code?

Vincent Petritz · 31. März 2012, 14:50

JavaScript-Quellcode

<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#menue').fadeOut('slow');
$('#ddd').mouseover(function() {
$('#menue').fadeIn('slow');
});
});
</script>
</head>
<body>
<div id="ddd">
Test0<br />
</div>
<div id="menue">
Test1<br />
Test2<br />
Test3<br />
</div>
</body>
</html>

Alles anzeigen

Maddin · 31. März 2012, 15:38

Klar bleibts aufgeklappt, wenn dus nicht zuklappst^^

JavaScript-Quellcode

$('#ddd').mouseover(function() {
$('#menue').fadeIn('slow');
}).mouseout(function() {
$('#menue').fadeOut('slow');
});

Vincent Petritz · 31. März 2012, 15:43

Daaanke. ;)

jQuery-Mouseover-CSS

jQuery-Mouseover-CSS

JavaScript-Quellcode

CSS-Quellcode

CSS-Quellcode

JavaScript-Quellcode

JavaScript-Quellcode

CSS-Quellcode

CSS-Quellcode

JavaScript-Quellcode

JavaScript-Quellcode

Teilen

Benutzer online 1