Hover nad odkazy na webu Nette

roman.campula

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š

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

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

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.