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

[jQuery] Dziwne działanie skryptu

VPS Starter Arubacloud
0 głosów
192 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 (604,400 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 (604,400 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 (604,400 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 (604,400 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ź 294 wizyt
pytanie zadane 28 maja 2019 w JavaScript przez Kerto Nowicjusz (240 p.)
0 głosów
0 odpowiedzi 634 wizyt
pytanie zadane 20 czerwca 2018 w JavaScript przez SzukającyPrzygód Bywalec (2,310 p.)

92,839 zapytań

141,780 odpowiedzi

320,848 komentarzy

62,171 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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...