CSS – Jak na ztučnění odkazu, nad kterým je myš?

[martas01]

cus, nevite nekdo jak udelat v css to, aby odkaz, kdyz na neho najedu mysi, tak aby pismo v nem ztloustlo nebo zmenilo barvu, kdysi sem to tak mel udelane v jednom webu, ale uz sem zapomel jak se to dela

// Upřesnil jsem nadpis dotazu
// Myloš

[Reklama]

[Tholus]

a:hover {
text-decoration: *;
color: *;
}

[Myloš]

Konkrétně „ztloustnutí“ pak pomocí vlastnosti font-weight:

Kód: Vybrat vše

a:hover {font-weight: bold;}

:hover efekt je prima věc, ale speciálně ztučnění nepovažuji za dobré, protože ztučnělý text většinou ovlivňuje své okolí, takže může vzniknout nový řádek, okolní slova se můžou z řádku na řádek přesouvat a podobně.

[Tholus]

Přesně tak, nejlepší je podtržení, to nemá na okolí vliv. Nebo hover změny pozadí, můžes vidět na mých stránkách, pokud přejedeš přes nějakou položku v menu, pozadí se změní.

[Myloš]

nejlepší je podtržení

Nikoli – podtržení by mělo být výchozí vlastností každého běžného odkazu (nemluvím teď o menu).
Vhodný běžný :hover-efekt je změna barvy textu nebo změna barvy pozadí, případně obojí.

Dokonce lze odkazu přidat rámeček, aniž by :hover narušoval okolí – normální odkaz (a:link a a:visited) budou mít rámeček barvy pozadí, neboli neviditelný, zatímco a:hover bude mít rámeček jinou barvou, tedy viditelný.
Takovým odkazům je ale vhodné nastavit 2–3px padding, aby ten rámeček nebyl na text nalepený.

[martas01]

no to ztučnění mi neovlivní okolí, protože to mam jako levé menu

[martas01]

mam jeste jeden dotaz, kdyz mam v css nastavene vlastnosti tech odkazu, tak jak udelam to kdyz chci aby treba jeden z nich nebyl cerny ale modry, zkousel sem to pomoci toho "class" a potom do stylu napsat neco jako .odkaz { color: blue;} ale to nejde

[Myloš]

Buď dej třídu tomu odkazu:

Kód: Vybrat vše

<a href="bleble" class="externi">

a vztahuj se k němu pak takhle:

Kód: Vybrat vše

a:link, a:visited {color: green;} /* obyč. odkaz */
a:hover {color: lime; background-color: yellow;} /* hover nad obyč. odkazem */
a.externi {color: red} /* externí odkaz */
a:hover.externi {color: navy; background-color: aqua;} /* hover nad externím odkazem */

anebo – je-li to součástí menu:

Kód: Vybrat vše

<menu>
   <li><a href="#">odkaz</a></li>
   <li><a href="#">odkaz</a></li>
   <li><a href="#">odkaz</a></li>
</menu>

pak styluj pro menu a a menu a:hover:

Kód: Vybrat vše

menu a {color: gray; background-color: #fcc;}
menu a:hover {color: #eee; background-color: black;}


[martas01]

Kód: Vybrat vše

a.externi {color: red}

tohle nejde vubec a tohle

Kód: Vybrat vše

a:hover.externi {color: navy; background-color: aqua;}

jde ale porad se to ztucni kdyz na to najedu mysi

[martas01]

Kód: Vybrat vše

a:hover {
      text-decoration: none;
      font-weight: bold; 
}
a:link, a:visited {
      text-decoration: none;
      color: black;
}
a.externi {color: red}
a:hover.externi {color: navy; background-color: aqua;}

radsi sem to tu dal cele

[Myloš]

:hover musíš definovat až po :link a :visited, poněvadž i :hover je zároveň :link nebo :visited, takže je jeho definice přebita.

Jinak se na moji ukázku můžeš podívat na http://kesolim.sweb.cz/TMP/ruzne_odkazy.html

[martas01]

tak mam to takhle a porad to nejde, sem to zkousel ruzne prehazovat a nic

Kód: Vybrat vše

a:link, a:visited {
      text-decoration: none;
      color: black;
}
a:hover.externi {color: navy; background-color: aqua;}
a:hover {
      font-weight: bold; 
}