změna obrázků v menu

[pajacz17]

Ahoj, mohu poprosit o radu, jak udelat odrazkovy seznam, aby měnil pozadí nebo odrážky když na něj najedu. Mohu poprosit jak se to děláte? Staci pomoci hover, nebo musim nějak jinak? Děkuji

[Reklama]

[x-rated]

na efekt po najetí je hover, takže třeba li:hover
obrázek jako img se pomocí css ale měnit nedá, takže buď jako pozadí, nebo spojit dva img do jednoho a při hoveru ho posunout do jiný pozice, kde bude vidět ten druhej, samozřejmě s overflow hidden na li

[Myloš]

Odrážkový seznam má vlastnost list-style-image, takže pomocí :hover to jde dobře, ale takto umístěný obrázek má konstantní svislé umístění, často nevhodné, takže se to beztak řeší jako list-style-type:none a obrázek se vkládá jako background-image. Ale i v tomto případě samozřejmě :hover na změnu funguje.

[pajacz17]

Děkuji. Ano, list-style-image znám, ale vždy když mám více úrovňový seznam, tak ty odrážky jsou strašně daleko od sebe.
Ještě prosím nevíte jak udělat, aby pozadí odrážky a samotný text měly stejný pozadí. Když dám background pro ul li, tak je samozřejmě jenom odrážka, a když jenom ul tak pak má vše pozadí. Ještě jednou díky
Nechá se taky nastavit tloušťka čáry a případně délka podtržení pro text-decoration: underline?

[CZechBoY]

Pro underline nemůžeš zvětšit šířku... jedině použít border-bottom.

Co se týče obrázků tak použij nějaký takovýto kód:

Kód: Vybrat vše

<style type="text/css">
#menu li > a {
  background-image: url('images/moje_odrazka.png');
  background-repeat: no-repeat;
  background-position: left center;
}
#menu li:hover > a, #menu li:focus > a {
  background-image: url('images/moje_odrazka_hover.png');
}
</style>

<ul id="menu">
 <li><a href="./">Domů</a></li>
 <li><a href="kontakt.html">Kontakt</a></li>
</ul>
 

[pajacz17]

Ano děkuji, ale když dám například border-bottom pro a:hover, tak tím je najednou větší blok a při najížedění myši to vždy divně se zvětšuje o to spodní podtržení. Mohu se prosím ještě zeptat, co je znak > mezi #menu li:focus > a? Děkuji

[CZechBoY]

Znak > značí přímého potomka. Když se neuvede žádnej operátor takj e to jakýkoliv zanořený prvek.
Pokud ti to skáče tak nech spodní border o velikosti jakou potřebuješ

Kód: Vybrat vše

#menu li > a {border-bottom-width: 2px; border-bottom-color: transparent;} 

a při přejetí jen přidej barvu

Kód: Vybrat vše

#menu li > a {border-bottom-color: red;} 

Border se roztahuje po celé délce prvku (včetně paddingu).

[pajacz17]

Mockrát děkuji, tak jednoduché. Jsem úplný blb, tak snad tady ty fígle se naučím