Jak stworzyć aktywny "hover" ?

Question

Witam serdecznie,

Problem: Chciałbym uzyskać efekt, aktywnego hovera w każdej podstronie.
Opis: Chodzi o to, aby po wejściu na daną podstronę... hover listy zachował swoją formę.Być może jest to nie wykonalne w taki sposób, ale jestem otwarty na inne propozycje. Na screenie przedstawię dokładnie jak to wygląda.

A efekt jaki chciałbym zachować po przejściu na inne podstrony, ma być taki:

Wie ktoś może jak to rozwiązać ? Ja już nie mam pomysłów, nic mi z tym nie wychodzi.

Pozdrawiam.

Comments

Proszę, daj mi kod strony a odpowiem Ci prościej i tylko podam co masz wklepać do edytora :D

Answer 1

Samym html+css -> możesz również bezpośrednio na danej podstronie przedefiniować styl jednego z obiektów, tak aby spełniał twoje wymagania. 

przykład:
 

<div style="background-color: #666; border: 1px solid red;" > Mój aktywny przycisk</div>

Pamiętaj że w tym przypadku, style które są w ten sposób zapisane, bezpośrednio przy obiekcie, są traktowane jako te najważniejsze (czy jak to tam ująć w słowa), czyli z nich skorzysta przeglądarka.

Comments

Zalecam unikanie stylowania inline w HTML. Takich styli praktycznie nie da się nadpisać w CSS. Teoretycznie jest to co prawda możliwe, ale praktycznie nie (biorą pod uwagę chociażby czytelność kodu). Styluj zawsze w oddzielnych plikach CSS, które w razie potrzeby można zawsze połączyć do jednego np. webpackiem.

---

Prawda, dałem tylko przykład jak to wykonać bez js'a.

Answer 2

Dodaj bibliotekę jquery do kodu (Pobierz stąd). Założę, że plik podstrony projekty to np projekty.php, albo edytor to edytor.php. Do każdego diva (czy ol czy spana) z menu (tego kafelka z projekty itp.) dodaj unikalne id np.

<div id="projekty" class="menu">PROJEKTY</div>

Potem dodaj JS. Pokażę to na przykładzie podstrony EDYTOR:

var podstrona = document.getElementById("edytor").innerHTML;

$(podstrona).css("color", "#fff"); //Dodaj tu swój styl dla hovera

Analogicznie dla PROJEKTY było bo:

var podstrona = document.getElementById("projekty").innerHTML;

$(podstrona).css("color", "#fff");

Jakbyś dał kod to było by mi łatwiej, ale mam nadzieję, że pomogłem :-)

Comments

A po co do takiej małej rzeczy pobierać jQuery? Jaki to ma sens?

---

Do $(podstrona).css();

---

A czym jest lepsze 

$(podstrona).css()

od

podstrona.style.

 

 

---

Nwm pisałem to na szybko :V

Answer 3

w samym html i css tego nie zrobisz bys musiał zapewne użyć do tego php albo js 

Comments

Ohh to nie dobrze.. gdyż php ani js.. jeszcze nie przerobiłem 

---

Samym html+css -> możesz również bezpośrednio na danej podstronie przedefiniować styl jednego z obiektów, tak aby spełniał twoje wymagania.

---

Ohh to nie dobrze.. gdyż php ani js.. jeszcze nie przerobiłem

Szczerze mówiąc to proponuję w miarę równolegle ogarniać podstawy PHP i JS. Z czasem sam ocenisz czy bardziej idziesz w back-end czy front, a może full... ale pewne podstawy warto mieć jednego i drugiego. Bez tego w zasadzie nie ruszysz webmasterki.

Answer 4

A nie wystarczy w css?

.twoj_przycisk {
	// Jakos go stylizujesz
}

.twoj_przycisk:hover { 
	background-color: ...;
	color: ...;
}