Wątek przeniesiony 2015-07-21 12:02 z Webmastering przez dzek69.

Podnoszenie elementu listy po najechaniu myszką

0

Witam.

Miało być proste ale jak zawsze jest jakiś problem.

A mianowicie zrobiłem menu w postaci listy:

ul#menu {
	position: absolute;
	background-color: blue;
	bottom: 0px;
}

ul#menu > li {
	position: relative;
	z-index: 0;
	background-color: red;
	display: inline-block;
	height: 80px;
	width: 200px;
	margin: 0px;
	margin-right: 5px;
	text-align: center;
	font-family: 'Chelsea Market', cursive;
	margin-bottom: -10px;
}

Wygląda to tak:

8ed4d02b90.png

Przy użyciu jQuery chciałem aby po najechaniu myszką odpowiedni element listy podnosił się do góry.

<script type="text/javascript" charset="utf-8">
     $("ul#menu > li").mouseenter(function() {	
    	$(this).stop().animate({
    		marginBottom: "0px"
    	}, 200);
  	});
  	
     $("ul#menu > li").mouseleave(function() {	
    	$(this).stop().animate({
    		marginBottom: "-10px"
    	}, 200);
  	});
</script>

Jednak po najechaniu na pojedynczy element w chwili obecnej wszystkie podnoszą się do góry.

af9d07e108.png

Nie bardzo wiem jak to poprawić.
Bardzo proszę o pomoc :)

dodanie znaczników <code class="css"> i <code class="javascript"> - @furious programming

1

Jak już używasz (błędnie, no ale co tam) position: absolute i position: relative to korzystaj z dobrodziejstw tego i animuj właściwość bottom (albo top).

A to, że to wszystko powinno być w samym CSS, oraz bez position przemilczmy.

0

No niby można w CSS użyć :hover ale ponoć animacji nie obsługują wszystkie przeglądarki. A skokowo źle to wygląda.

Co do bottom i top, to z tego co wiem parametr ten działa tylko dla position: absolute, a gdy dodam to do każdego to mi się sypie całość.
Parametr bottom dodany jest do <UL> aby ten był na dole diva.

Prosiłbym może o jakieś podpowiedzi bardziej konkretne :) I jeżeli są już błędy w zamyśle to również proszę powiedzieć gdzie to zrobię to tak jak powinno być zrobione :)

1

http://jsfiddle.net/sa1sbtjg/1/
A dla IE zrób coś takiego:

<!--[if lte IE 9]>
    <link rel="stylesheet" type="text/css" href="cssDlaBalwanowUzywajacychIE.css">
<![endif]-->

A w tym css zrób np. zwykły :hover i zmień background czy coś.

0

Ooo. Udało się :). Dzięki za pomoc dzek69, co prawda twardą ręką ale pomogłeś :P

1 użytkowników online, w tym zalogowanych: 0, gości: 1