CSS a odkazy po najetí kurzoru: Jak zrušit tečkované podtržení u obrázků?

(2 hodnocení)

26. 8. 2009 11:10:10

Dobré dopoledne,

uvažuju, že bych pro zvýraznění odkazů použil (aby se po najetí na odkaz pod ním objevilo tenké tečkované podtžení):

a:hover {border-bottom: 1px dotted #008000;}

Bohužel, ať dělám, co dělám, toto tečkované podtržení se mi zobrazuje i pod obrázky, které někam odkazují.

Nefunguje např.

a.image:hover { border: none;}

nebo

a:hover img{border:0;}

ani spousta dalších věcí, které jsem už vyzkoušel.

Poradíte?

26. 8. 2009 11:10:10

https://webtrh.cz/diskuse/css-a-odkazy-po-najeti-kurzoru-jak-zrusit-teckovane-podtrzeni-u-obrazku#reply361166

SGS

(7 hodnocení)

26. 8. 2009 11:25:03

Nemas stylovat ten obrazek, ale ten odkaz. Obrazek je jen obycejny obsah odkazu. Takze odkazum kde mas obrazek pridej nejakou classu kde podtrzeni nulujes.

26. 8. 2009 11:25:03

https://webtrh.cz/diskuse/css-a-odkazy-po-najeti-kurzoru-jak-zrusit-teckovane-podtrzeni-u-obrazku#reply361165

Juraj Kostolanský

(18 hodnocení)

26. 8. 2009 11:48:17

outline: 0;

//tak som si to na prvýkrát zle prečítal, outline ti nepomôže. buď odkazy alebo obrázky musia mať nejakú "class" kde nastavíš zvlášť border. každopádne SGS má pravdu, štýlovať musíš odkazy, nie obrázky.

26. 8. 2009 11:48:17

https://webtrh.cz/diskuse/css-a-odkazy-po-najeti-kurzoru-jak-zrusit-teckovane-podtrzeni-u-obrazku#reply361164

ATV

(23 hodnocení)

26. 8. 2009 12:07:12

Šlo by to, jak píše SGS.

Link

body a {border-bottom: 1px dotted #fff;}

body a:hover {border-bottom: 1px dotted #008000;}

.image a {border-bottom: none;}

Je to jen narychlo, snad to je dobře, ten #fff; link je tam, aby to vždy neposkočilo při hoveru.

26. 8. 2009 12:07:12

https://webtrh.cz/diskuse/css-a-odkazy-po-najeti-kurzoru-jak-zrusit-teckovane-podtrzeni-u-obrazku#reply361163

(2 hodnocení)

26. 8. 2009 12:56:46

SGS, Mr.Frenzi, PROXY:

Díky.

Funguju na staré bloggerské šabloně. Chápu-li to správně, musel bych nejen změnit css, ale i projet stovky článků a u každého obrázku, který někam odkazuje, provézt Vámi navrhované změny.

Je to tak?

Pokud ano, neexistuje elegantnější řešení?

Pokud ne, v čem se mýlím?

26. 8. 2009 12:56:46

https://webtrh.cz/diskuse/css-a-odkazy-po-najeti-kurzoru-jak-zrusit-teckovane-podtrzeni-u-obrazku#reply361162

milan

26. 8. 2009 14:06:47

Ty totiž hledáš selektor, který najde všechny tagy A, které mají jako potomka tag IMG

Bohužel v css to jde udělat jen naopak, tj najít všechny tagy IMG, které mají jako předka tag A. Což nechceš.

Bez změny kódu lze tvůj požadavek řešit triviálním javascriptem za pomoci nějaké pěkné knihovny, jako je jQuery nebo prototype.

26. 8. 2009 14:06:47

https://webtrh.cz/diskuse/css-a-odkazy-po-najeti-kurzoru-jak-zrusit-teckovane-podtrzeni-u-obrazku#reply361161

(2 hodnocení)

26. 8. 2009 16:05:36

Tak jsem nakonec uplácal toto řešení, které funguje v IE a Firefoxu:

a:hover {

color : #940f04;

border-bottom: 1px dotted #008000;

text-decoration : underline;

}

a img {

border-width : 0;

vertical-align: -5px;

}

.post img {

padding : 4px;

border : 1px solid #cde;

background-color: #ffffff;

}

Díky všem za pomoc.

---------- Doplňující příspěvek odeslán v 23:18 ----------

Starý notebooček s IE6 a rozlišením 1024px zchladil mé nadšení.

Už mi neraďte, nějakou dobu rezignuji na jakékoli pokusy s grafikou.

Každý, kdo dokáže vytvořit stránky s validním kódem, které dobře vypadají na všech monitorech + ve všech verzích různých prohlížečů, má můj nejhluší obdiv.

Já se vždycky krkolomně snažím změnit nějakou maličkost na bloggerské šabloně a když se to povede, většinou zjistím, že má radost byla předčasná, protože za nějakých podmínek mé řešení nefunguje.

26. 8. 2009 16:05:36

https://webtrh.cz/diskuse/css-a-odkazy-po-najeti-kurzoru-jak-zrusit-teckovane-podtrzeni-u-obrazku#reply361160

Pro odpověď se přihlašte.

Přihlásit