• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[jQuery] Dziwne działanie skryptu

Aruba Cloud - Virtual Private Server VPS
0 głosów
250 wizyt
pytanie zadane 1 grudnia 2015 w JavaScript przez enther Nowicjusz (240 p.)

Witam wszystkich koderów :) Mam problem ze skryptem który ma po prostu po najechaniu kursorem na element menu podświetlić się, po odjechaniu myszą wrócić do stanu poprzedniego a po kliknięciu podświetlić się na stałe. Problem w tym że po kliknięciu poprzedni aktywny element nie wraca do początkowego stanu, dopiero gdy na nieaktywny już element najedzie i odjedzie się myszą. Oto kod:

wersja jquery 1.11.3

kod jquery

$('.menu-element').mouseover(function(){
		if($.trim($(this).hasClass( "active" )) == 'false'){
			
			jQuery("img", this).css("width", "160px").css("height", "160px");
			jQuery("p", this).css("color", "white").css("background", "#0181BF");
		}
	}).mouseout(function(){
		if($.trim($(this).hasClass( "active" )) == "false"){
			
			jQuery("img", this).css("width", "150px").css("height", "150px");
			jQuery("p", this).css("color", "#595854").css("background", "");
		}
	}).click(function(){
		
		$(".menu-element").removeClass("active");
		$(this).addClass("active");
	});

Kod css

.active p {
	color: #ffffff; 
	background: #0181BF;
	
}

.active img {
	width: 160px; 
	height: 160px;
}

 

1 odpowiedź

0 głosów
odpowiedź 1 grudnia 2015 przez Comandeer Guru (606,550 p.)
$.trim($(this).hasClass( "active" ))

Prawdę powiedziawszy nie mam pojęcia to ma robić.

Większość problemu rozwiązuje CSS, jedynie samo kliknięcie wymaga JS: http://jsfiddle.net/Comandeer/bkut7002/

komentarz 1 grudnia 2015 przez enther Nowicjusz (240 p.)
Ten fragment miał sprawdzać czy element jest już aktywny, żeby nie wyświetlać dwa razy animacji. Tak czy inaczej wykorzystam twój kod choć go do końca nie rozumiem :D
komentarz 1 grudnia 2015 przez enther Nowicjusz (240 p.)

A mógłbyś zmienić swój kod tak żeby <li class="menu-item">Aha</li> zawierał 2 elementy tzw. <li class="menu-item">   <img src="" />   <p>dfdf </p>    </li> i oba one podświetlały się po najechaniu myszką na dowolny z nich?

komentarz 1 grudnia 2015 przez Comandeer Guru (606,550 p.)

.menu-item:hover img, .menu-item:hover innyElement

komentarz 1 grudnia 2015 przez enther Nowicjusz (240 p.)
dzięki za odp. a co w przypadku gdy oba elementy mają inne właściwości po najechaniu na nie myszką?
komentarz 1 grudnia 2015 przez Comandeer Guru (606,550 p.)
Napisać dwie oddzielne reguły w CSS?
komentarz 1 grudnia 2015 przez enther Nowicjusz (240 p.)
edycja 5 października 2016 przez enther
coś nie działa
komentarz 1 grudnia 2015 przez Comandeer Guru (606,550 p.)
Bo walisz mu style inline zamiast operować na klasie.
komentarz 1 grudnia 2015 przez enther Nowicjusz (240 p.)
Dzięki, to jak zaimplementować to w tym kodzie?
komentarz 2 grudnia 2015 przez enther Nowicjusz (240 p.)

Pozmieniałem style css na operowanie na klasach ale nic się nie zmienasad

Podobne pytania

0 głosów
1 odpowiedź 359 wizyt
pytanie zadane 28 maja 2019 w JavaScript przez Kerto Nowicjusz (240 p.)
0 głosów
0 odpowiedzi 692 wizyt
pytanie zadane 20 czerwca 2018 w JavaScript przez SzukającyPrzygód Bywalec (2,310 p.)

93,331 zapytań

142,323 odpowiedzi

322,400 komentarzy

62,667 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...