Hover nad odkazy na webu Nette

Upozornění: Tohle vlákno je hodně staré a informace nemusí být platné pro současné Nette.
roman.campula
Člen | 60
+
0
-

Zdravím,
tak jsem se chtěl na webu Nette inspirovat, jak je provedeno podbarvení odkazů při přejetí myší. Inspiroval jsem se, potud OK. Když mi však funkce nepříjemně podbarvovala i obrázky, chtěl jsem se podívat, jak to má David Grudl udělané. No, moc nemá :-). Na https://tracy.nette.org/ to obrázky podbarvuje úplně stejně špatně jako mě :-)

Marek Bartoš
Nette Blogger | 1146
+
0
-

Who cares. Vývojářská síť nemusí mít tipťop design. Navíc to tak je dost možná úmyslně.
A pokud to nechceš na obrázcích, tak si musíš přidat nějakou classu na odkaz, abys určil, zda obsahuje obrázek, css to neumí.

CSS4 :has()

Editoval Mabar (28. 2. 2017 22:17)

GEpic
Člen | 562
+
0
-

A čeho chceš přesně docílit? Půjde to určitě i v CSS2 / 3

Pokud chceš nastylovat obrázky (efekt po najetí myši), které jsou uvnitř odkazu (a globálně), použij k tomu tento selektor:

a > img:hover {
	/* tvůj styl */
}

Popřípadě, pokud chceš jen nějaké obrázky, pak stačí přidat obrázkům nějakou třídu:

a > img.effect:hover {
	/* tvůj styl */
}

Nezapomeň, že anchory (<a>) a obrázky (<img>) jsou ve výchozím stavu „inline“ (display: inline;) prvky, narozdíl od klasického divu (<div>), který je blokový a mnohdy právě MUSÍŠ udělat blokové i odkaz s obrázkem (display: block;), aby se obojí nechalo hezky nastylovat bez jakýchkoliv triků.

PS: Přesně to je problém i https://tracy.nette.org/ kde u odkazů chybí právě display: block

Editoval GEpic (1. 3. 2017 9:03)

roman.campula
Člen | 60
+
0
-

Děkuji za nápady. Funkce .has u jQuery je poměrně zajímavá a bylo by ji možné na to použít. Nakonec jsem však dospěl k tomu, že bude nejjednodušší u všech „normálních“ odkazů přidat třídu a ta tu pak aplikovat styl.