+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: Uzyskanie efektu hover (/thread-uzyskanie-efektu-hover)
Uzyskanie efektu hover - gris - 08-11-2011
Mam problem ze stylem hover, który mi nie działa. Mam menu poziome i chcę na nim uzyskać ten efekt. Niestety przy użyciu obrazka nie działa, natomiast jak używam samego koloru to jest ok. Zauważyłem też, że dopóki nie dopiszę float:left do #topnav ul li (czyli dopóki menu jest pionowe) to hover ładnie działa.
Kod:
#topnav{ background: #0E192D url(../images/menu.png) top repeat-x;
height: 54px;
width:980px;
margin: 0px;
padding:0px;
font-weight: bold;
}
#topnav ul {
margin: 0px 0px 0px 11px;
padding: 0;
width: auto;
float: left;
list-style-type:none;
}
#topnav ul li {
float: left;
margin: 0;
padding: 0;
height: 54px;
position:relative;
}
#topnav ul li a:hover {
background: url(../images/hover.png);
}RE: Uzyskanie efektu hover - Kartofelek - 08-11-2011
bardzo zły kod. Dlatego nie działa. LI ma float, a wymiarów nie podanych. jedno bez drugiego jest bez sensu, chyba że to inny typ (inline-block). Linki są domyslnie inline więc background dla nich będzie bezsensownym. Trzeba by je zmienić na blokowe itp itd itp itd
Właściwie 90% kodu do wymiany.
Ogólnie przejrzyj jakiś tutorial o css menu i zwróć uwagę na typy renderowania.