Efekt hover ma sie uruchamiać w miejscu linii kreskowych

Question

Witam.

Po najechaniu kursorem na dany tekst, efekt hover ma sie uruchamiać w miejscu linii kreskowych.

Tak to wygląda, ale nie działa jak należy:

https://jsfiddle.net/Krzysiek_35/cj8kxdpL/37/

Próbowałem wielu sposobów, ale ciągle jest coś nie tak.

Czy da sie zrobić tak, aby ten efekt hover uruchamiał sie tylko w miejscu linii kreskowych?

Answer 1

Do selektora ".left-nav ul li a" dopisz position: relative; I już będzie lepiej :) Gdy masz pozycje relatywną wszystkie absolutne są liczone względem tej relatywnej zamiast względem strony ;) Potem wystarczy użyć właściwości top,left, right, bottom aby dopasować idealnie ;) 

Comments

Do tego co chcesz przesunąć ;) Chcesz przesunąć kreske to do kreski :) wystarczyże dopiszesz tylko jedna właściwość bottom na -2px.

Dodatkowo musisz się pozbyć overflow hidden lub dodać w innym miejscu kreske. Warto też się zastanowić czy nie lepiej animować szerokość kreski :)

---

.left-nav
{
	width: 175px;
	position: absolute;
	top: 10%;
	font-size: 14px;
	line-height: 200%;
  background-color: #000000;
	float: left;
  left: 30%;
}

.left-nav ul
{
	padding: 0px 14px 0px;
	list-style-type: none;
}

.left-nav ul li
{
	text-align: justify;
	height: 30px;
	border-bottom: 1px dashed #DDDDDD;
}

.left-nav ul li a
{
	text-decoration: none;
	font-size: 15px;
	font-weight: bold;
	color: #DDDDDD;
	outline: none;
  position: relative;
  bottom: 3px;
	padding: 4px 0px;
}

.left-nav a:before, a:after
{
	content: '';
	position: absolute;
	transition: width .5s ease;
}

.cool-link
{
	display: block;
}

.cool-link:before
{
	left: 0;
	bottom: 0;
	width: 0;
	height: 3px;
	background: #76DAFF;

}

.cool-link:hover:before
{
  width:  100%;
}

.left-nav ul li img
{
	width: 29px;
	height: 22px;
	float: left;
	margin-right: 10px;
	padding: 4px 0px 0px;
}

Może nie jest idealnie. Wrzuciłem kilka zmian. I dodałem animacje opartą na szerokości. Jest to trochę mniej optymalne ale chyba jest ok ? :) 

---

Teraz jest prawie idealnie:

https://jsfiddle.net/Krzysiek_35/cj8kxdpL/63/

Ta animacja wyświetla sie idealnie, ale uruchamia sie to też, gdy najedzie sie kursorem po za obszar danego tekstu.

Czy da sie zrobić tak, aby animacja uruchamiała sie wtedy, gdy najedzie sie kursorem tylko na dany tekst?

---

Pasek uruchamia się po najechaniu na <a>, a że to <a> zajmuje większy obszar niż sam tekst, który znajduje się w <span>, efekt uruchamia się na większym obszarze.

Jeżeli chcesz dany efekt osiągnąć po najechaniu tylko na sam tekst trzeba przypisać hover dla spanu.

Jednak nie zadziała on jeśli pasek nie będzie przypisany do <span>

Dlatego trzeba cały pasek i hover przypisać do spanu:

.left-nav span:before {
	content: '';
	position: absolute;
	transition: width .5s ease;
}

.cool-link {
	display: block;
}

.left-nav span:before {
	left: 0;
	bottom: 0;
	width: 0;
	height: 3px;
	background: #76DAFF;
}

.left-nav span:hover:before {
	width: 100%;
}

 

---

Prawie na 100% jest super, ale gdy najedzie sie kursorem po za obszar danego tekstu albo na obrazek, to pojawia sie cursor: pointer.

Chciałbym, aby cursor: pointer pojawiał sie wtedy, gdy najedzie sie kursorem tylko na dany tekst.

Czy wiesz jak zrobić, aby animacja uruchamiała sie wtedy, gdy najedzie sie kursorem tylko na dany tekst?

---

Nie zaimplementowałeś mojego kodu.

Więc zrobiłem to sam:

https://jsfiddle.net/ew9hmkpd/

Zmieniłem teraz tylko widok kursora, ale animacja uruchamiała się już wcześniej tylko po najechaniu na tekst.

---

Ostatnio nie miałem czasu na webmasterkę. W wolnym czasie to obadam.

Spoko, dzięki.