Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
[css] Zmiana list-style po najechaniu na link
#1
Witam ma problem jak w temacie bo chcę zmienić list-style po najechniu na link ale nie wiem jak. Chodzi mi o odnośniki a oto mój styl:

a {
border-bottom: 1px dotted #7D9412;
text-decoration: none;
color: #F2900B;
}

a:hover {
border: none;
text-decoration: none;
color: #FFFFFF;
}

...

#colTwo {
float: right;
width: 200px;
background: #111111;
}

#colTwo ul {
margin: 0;
padding: 10px 0 0 0;
list-style: none;
}

#colTwo li {
margin-bottom: 20px;
background: url(images/img3.gif) repeat-x;
}

#colTwo li li {
margin-bottom: auto;
background: none;
}

#colTwo li ul {
padding-top: 0;
padding-left: 20px;
list-style: square inside;
}


Z góry dzięki za odp i proszę jak najbardziej szczegółowo^^
Odpowiedz
#2
Podaj link do pliku z przykładem. Jeśli nie masz serwera to zrób zipa i załącznik do swojego posta.
Odpowiedz
#3
http://www.sernik1994.lif.pl/default.css - styl css
http://www.sernik1994.lif.pl/ - strona
http://www.sernik1994.lif.pl/menu.php - menu
a do indexu nie podam bo to PHP to ci otwrzy już przerobiony na normalny kod html.
Odpowiedz
#4
I teraz jeszcze wytłumacz co chcesz zrobić z tym menu. Chodzi Ci o to by po najechaniu na wybrany element menu (listy) zmieniał się jego punktor tak? Jeśli tak to w czystym CSS nie znam takiego rozwiązania, ale wiem jak można to obejść. Zamiast list-style można dać background dla elementu <a> w <li> i odpowiednio przesunąć tekst w <a> poprzez padding i zmieniać tło tego <a> w zależności od tego czy najeżdżamy myszką czy nie.

Tak na szybko
Kod:
ul li a {
background:url(obrazek.jpg) left no-repeat;
padding-left: 10px;
}
ul li a:hover {
background:url(obrazek_hover.jpg) left no-repeat;
}
Odpowiedz
#5
wymyśliłem takie coś na poczekaniu (nie testowałem):
Kod:
<ul id="nav">
   <li><ul><li>link1</li></ul></li>
   <li><ul><li>link2</li></ul></li>
</ul>

i CSS:

Kod:
#nav {
   list-style: none;
}
#nav li ul:hover {
   list-style-type: square; /* styl po najechaniu na element */
}

o ile dobrze zrozumiałem o co ci chodzi Smile

//edit
ok, działa tak jak chciałem Smile bezinwazyjne i bezobrazkowe menu
Odpowiedz
#6
Odpowiedz
#7
a fakt, zapomniałem. jestem super anty-ie.
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  [CSS] Presta 1.7 zmiana w pliku css ?DsxSoft 0 2,137 07-02-2019, 15:29
Ostatni post: ?DsxSoft
  Zmiana obrazka po najechaniu / Efekt rollover JS manoa 0 4,700 06-12-2018, 18:46
Ostatni post: manoa
  Zmiana sposobu rozwijania + podmiana obrazka arkadiio 7 7,197 23-03-2015, 03:52
Ostatni post: arkadiio
  skrypt uruchamiajacy nowy link Arnimarl 1 2,888 26-05-2014, 00:34
Ostatni post: Kartofelek
  Zmiana obrazka, oraz opisu pod nim po kliknięciu Olsz4k 12 12,820 28-07-2013, 20:10
Ostatni post: Olsz4k

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl