[CSS] Div - zmiana tła po najechaniu myszką, oraz caly obszar div jako odnośnik Opcje

[partyboyu]

Witam, otóż chciałbym wykonać menu dokładnie tak samo działające jak menu "Kategorie Youtube" na stronie głównej yt.
Dla mojej witryny, obecnie znajduje sie taki kod:

css

Kod

#kategorie li {
    font-size: 12px;
    padding: 7px 2px 7px 18px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
}

html

Kod

<div id="kategorie">
<ul>
       <li><a href="{[var:$settings['siteurl']]}/category/26/GT_and_prototypes/1.html">GT and prototypes</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/27/Single_seaters/1.html">Single seaters</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/28/Rally/1.html">Rally</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/29/Touring/1.html">Touring</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/30/Stock_cars/1.html">Stock cars</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/31/Motorbikes/1.html">Motorbikes</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/32/Drift/1.html">Drift</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/33/Vintage/1.html">Vintage</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/34/Club_racing/1.html">Club racing</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/35/School_and_educational/1.html">School and educational</a></li>
       <li><a href="{[var:$settings['siteurl']]}/category/36/Others/1.html">Others</a></li>
</ul>
</div>

Interesuje mnie dokladnie taki sam efekt ja na youtubie, ze caly obszar div-a dziala jako odnosnik a dodatkowo po najechaniu zmienia sie cale tlo, nie interesują mnie odsylacze obrazkowe.

Bede dozgonnie wdzieczny za jaka kolwiek pomoc, a moze da sie to zrobic w inny sposob?
Pozdrawiam

[tolomei]

caly obszar div-a dziala jako odnosnik

Ustaw padding bezpośrednio znacznikom a.

po najechaniu zmienia sie cale tlo

Do zdarzeń "po najechaniu" służy pseudoklasa :hover.

np:

[HTML] pobierz, plaintext 
div {
    background-color: red;
}
div:hover {
    background-color: green;
}
[HTML] pobierz, plaintext 

Po najechaniu zmienia się z czerwonego na zielony.

Pozdro.

[Sky_walker]

Kod

#kategorie li a { background-color: red; }
#kategorie li a:hover { background-color: pink; }

Tylko musisz pozbyć się paddingów z Diva i w zamian wstawić je do #kategorie li a { }

Innymi słowy:
Nie ma czegoś takiego jak Div który jest odnośnikiem. Div może wstawiać tło (choć lepiej byłoby po prostu użyć UL) ale odstępy i odnośniki to wyłącznie kwestia elementów A w środku.

[partyboyu]

niewiem jak to zrobic, narazie efekty sa takie jakie sa, sami sprawdzcie,

CSS:

Kod

#kategorie li {
    padding: 7px 2px 7px 18px;
    font-size: 12px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
}

#kategorie li a:hover {
              background-color: #1C1C1C;
    padding: 7px 2px 7px 0px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B
}

natomiast w HTML nic nie zmienialem
no niby prostwe ale niekumam, moze to przez moj wiek (IMG:style_emoticons/default/wink.gif)

Ten post edytował partyboyu 30.03.2012, 22:27:34

[vonski]

Przede wszystkim dodaj do stylów:

[HTML] pobierz, plaintext 
#kategorie li a {display:block;}
[HTML] pobierz, plaintext 

i pokombinuj z paddingami. Jeśli jeszcze tego nie zrobiłeś to zainstaluj sobie Firebug'a - z jego pomocą zajmie Ci niecałą minutę osiągnięcie tego efektu o który Ci chodzi (IMG:style_emoticons/default/smile.gif)

Ten post edytował vonski 31.03.2012, 00:25:22

[partyboyu]

sory ze tak mecze tym tematem ale mam cos takiego:

Kod

#kategorie li {
              padding-top: 7px;
              padding-bottom: 7px;
    font-size: 12px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
}

#kategorie li a{
              padding: 7px 2px 7px 18px;
    font-size: 12px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
}

#kategorie li a:hover {
              background-color: #1C1C1C;
    padding: 7px 2px 7px 14px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
              border-left: 4px solid;
              border-left-color: #666666;
}

no i gdy zmienie cus takiego:

Kod

#kategorie li a:hover {
    padding: 7px 100% 7px 14px;

to dziwnie sie calosc rozjezdza (2 linijki), to znaczy rozjezdzaja sie te "tabele" ktore ktorych nazwy linkow sa dwu wyrazowe

a jejku jakie to bylo proste, HTML bez zmian
CSS:

Kod

#kategorie li a{
              padding: 7px 2px 7px 18px;
    font-size: 12px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
              display:block;
}

#kategorie li a:hover {
              background-color: #1C1C1C;
    padding: 7px 2px 7px 14px;
              border-top: 1px solid #323232;
              border-bottom: 1px solid #1B1B1B;
              border-left: 4px solid;
              border-left-color: #666666;
}

i dziala (IMG:style_emoticons/default/smile.gif)
dziekuje za pomoc, pozdrawiam

Ten post edytował partyboyu 31.03.2012, 01:16:05