• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed Czemu div po najechaniu nie zmienia koloru?

Object Storage Arubacloud
0 głosów
383 wizyt
pytanie zadane 10 października 2015 w HTML i CSS przez xR Mądrala (6,260 p.)
zamknięte 11 października 2015 przez Eryk Andrzejewski

Witam tak jak wyżej, tworzę jak narazie początek strony i napotkałem problem, gdy chce tak jak w filmie Pana Mirosława by po najechaniu kursorem na danego diva(a dokładniej li) kolor tła się zmienił, niestety ja nie mogę znaleźć od dłuższego czasu gdzie jest błąd, więc proszę Was o pomoc z nadzieją, że ktoś bardziej doświadczony szybko zlokalizuję błąd, pozdrawiam i z góry dziękuje

kod html

<!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<title>Gold</title>
	<meta name="description" content="klub" />
	<meta http-equiv="X-UA Compatible" content="IE=edge, chrome=1" />
	<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
	<div id="wrapper">
		<div id="header">
		<h1 style="color:#DADADA">Golden</h1>
		
		</div>

		<div id="nav">
			<ol>
				<div class="navi"><li><a href="#">Strona główna</a></li></div>
				<div class="navi"><li><a href="#">Informacje</a></li></div>
				<div class="navi"><li><a href="#">Osoby</a></li></div>
				<div class="navi"><li><a href="#">Kontakt</a></li></div>
				<div style="clear:both;"></div>
			</ol>
		</div>
		<div id="contentwithmenu">
		<div id="content">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fringilla dapibus lacus sit amet aliquam. Nam hendrerit interdum diam, non varius augue vehicula at. Quisque quis ipsum sagittis, ullamcorper tortor in, pellentesque neque. Phasellus velit eros, molestie at diam nec, aliquam viverra sem. Nullam porta justo in tortor lacinia vulputate. Suspendisse tristique neque accumsan, placerat dui bibendum, scelerisque ipsum. Nulla dictum felis ullamcorper nunc sodales malesuada. Duis finibus aliquet venenatis. Proin placerat, urna sed placerat efficitur, sem arcu egestas metus, id vehicula justo elit id dolor. Phasellus urna leo, placerat quis tempor sit amet, condimentum in mauris. Sed porttitor consequat lorem, vulputate posuere nulla bibendum ac. 
		Morbi sodales pulvinar bibendum. In molestie elit efficitur mauris scelerisque hendrerit. Nunc imperdiet tempor congue. Etiam molestie dapibus porttitor.

In vitae finibus metus, et elementum nulla. Quisque efficitur rhoncus nisi sit amet sollicitudin. Etiam vitae semper erat. Curabitur sollicitudin sit amet massa blandit vulputate. Duis at dui tempor, tempor tortor a, fringilla risus. Vivamus at rutrum dui. Nam nibh sapien, sagittis eu dignissim commodo, tempor nec tortor.

Pellentesque finibus, quam vitae convallis fringilla, nulla dui interdum sapien, ac fermentum sapien mi ac enim. Quisque tortor lectus, euismod sit amet nunc ut, aliquam pulvinar dui. Duis nisi magna, semper sit amet tempor et, tristique et massa. Suspendisse id dapibus elit. Nam sed mauris magna. Phasellus rhoncus suscipit sem, ac aliquet nibh euismod convallis. Aliquam erat volutpat. Nam faucibus tristique turpis, id posuere urna efficitur quis. Vivamus dapibus dui dui, nec eleifend justo tempor eu. Morbi ex felis, pulvinar tincidunt ante eget, placerat porttitor leo. Suspendisse sodales massa ut quam blandit euismod.

Donec metus quam, aliquet at scelerisque non, vulputate ut lacus. Quisque pretium est lectus, nec cursus magna hendrerit id. Aliquam ornare ac libero et pellentesque. In a libero neque. Maecenas fringilla tortor justo. Mauris vel erat elit. Donec at massa dui.

In accumsan auctor eros, vel vehicula nibh consequat a. Mauris nisl elit, pulvinar nec dolor sit amet, sagittis faucibus leo. Suspendisse malesuada dapibus felis, nec dictum libero faucibus quis. Ut aliquet ex eget dolor dictum blandit. Praesent at posuere est. Quisque pellentesque suscipit gravida. Cras pulvinar ipsum eu neque scelerisque ultrices. Vestibulum sed felis sit amet tortor varius auctor sit amet vel odio. Suspendisse potenti. Donec sed lacus arcu. Fusce at nibh vitae ex tincidunt congue vel at justo. Donec facilisis viverra dolor ut dignissim. Fusce pretium urna ac ipsum volutpat, id aliquet urna elementum.
		</div>
		
		<div id="menubottom">
		sad
		</div>
		</div>
		<div id="footer">
		
		</div>
	
	</div>
</body>
</html>

Kod css:

body
{
    background-color:#192226;
    margin: 0!important;
}
#header
{
    height: 70px;
    background-color:#192226;
    text-align:center;
    padding: 10px;
}
#wrapper
{
    width:100%;
}
#nav
{
    height: 70px;
    background-color:#575757;
    text-align:left;
    border: 1px solid #9999FF;
}
.navi
{
    float:left;
    padding:10px;
    margin-right:75px;
    
    
    
}
}
#contentwithmenu
{
    width: 100%;
}

#content
{
    background-color:#143D66;
    width: 70%;
    float:left;
    min-height: 420px;
    
}
#menubottom
{
    background-color: #5252CC;
    width: 30%;
    float: left;
    min-height: 420px;
}
#footer
{
    background-color:black;
    height:57px;
    clear:both;
    
}
ol
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 20px;
    height: 30px;
    line-height: 200%;
    display:inline-block;
    
}
ol a
{
    color:#FFFFCC;
    text-decoration: none;
    display:block;
    
}
ol > li
{
    float:left;
    width: 150px;
}
ol > li:hover
{
    
    background-color:red;
}

To czego dotyczy się blad jest wyżej(ol >li:hover)

Edit: W przypadku stylizacji samego li działa, lecz nie tak jakbym chciał.. :/

komentarz zamknięcia: Problem rozwiązany

2 odpowiedzi

+1 głos
odpowiedź 10 października 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)
wybrane 10 października 2015 przez xR
 
Najlepsza

Eee ale co to jest?

<div id="nav">
         <ol>
             <div class="navi"><li><a href="#">Strona główna</a></li></div>
             <div class="navi"><li><a href="#">Informacje</a></li></div>
             <div class="navi"><li><a href="#">Osoby</a></li></div>
             <div class="navi"><li><a href="#">Kontakt</a></li></div>
             <div style="clear:both;"></div>
         </ol>
     </div>

Masz menu na liście ol i w niej robisz divy? Bez sensu, jak ma być na liście to zostaw tylko elementy li.

Nie zmienia koloru może dlatego że dajesz

ol > li

albo

ol > li:hover

Czyli dotyczy to li które są bezpośrednio w liście ol. A Twoje nie są ponieważ masz tam jakieś niepotrzebne divy.

komentarz 10 października 2015 przez xR Mądrala (6,260 p.)
No właśnie się tak przed chwilą zastanawiałem nad tym czy tych divów nie wywalić, czyli jedno zakłóca drugie? Oraz jakbyś mogl odp na pytanie w moim powyższym komentarzu :)
komentarz 10 października 2015 przez Arkadiusz Waluk Ekspert (287,950 p.)

Oczywiście że wywalić, jeśli masz menu na liście ol to po co tam divy? 

HTML dla tego menu powinien wyglądać tak:

<div id="nav">        
        <ol>
            <li><a href="#">Strona główna</a></li>
            <li><a href="#">Informacje</a></li>
            <li><a href="#">Osoby</a></li>
            <li><a href="#">Kontakt</a></li>
        </ol>
</div>

I do tego jeszcze odpowiedni CSS. A co do pytania to chodzi o to dlaczego padding też nie zmienia koloru tła po najechaniu? Proste - dlatego że nie masz nigdzie ustawionego paddingu dla tych elementów. Masz tylko w divach o klasie .navi a ich tam wcale jak już pisałem nie powinno być.

komentarz 10 października 2015 przez xR Mądrala (6,260 p.)
ok, dzięki :)))
+1 głos
odpowiedź 10 października 2015 przez Paweł123 Nałogowiec (33,500 p.)

Cześć, nie wiem czy o to chodziło, ale w ostatniej linijce kodu css zmieniałem na ten kod i chyba wszystko działa

ol   li:hover
{
     
    background-color:red;
}

 

komentarz 10 października 2015 przez xR Mądrala (6,260 p.)
Dobra, dzięki, a żeby jeszcze wraz z "paddingiem" zmieniał tło? :P
komentarz 10 października 2015 przez xR Mądrala (6,260 p.)
Jeżeli jest taka możliwość, bo na filmie Pana Mirosława(odc 3 css) robił tak, i dziwi mnie dlaczego mój zapis w tym wypadku nie działa..
komentarz 10 października 2015 przez furas Maniak (53,800 p.)

Musiał być dodać regułę .navi:hover aby także jemu zmieniało kolor po najechaniu.

Ale tak ogólnie to dziwacznie wygląda, że w <ol> dajesz <div> aby potem w nim dać <li> . Jak dla mnie to <div> jest tam zbyteczne bo to <li> mogło by przejąć wszystkie jego funkcjonalności.

https://jsfiddle.net/10pprnko/

komentarz 10 października 2015 przez xR Mądrala (6,260 p.)
dzięki za pomoc, głupotę walnąłem :P
komentarz 10 października 2015 przez Schizohatter Nałogowiec (39,600 p.)
<div> w tym miejscu jest przede wszystkim niedozwolony.

Listy jako dzieci pierwszego rzędu mogą mieć tylko elementy listy i nic innego.

Podobne pytania

–2 głosów
2 odpowiedzi 461 wizyt
pytanie zadane 26 grudnia 2019 w HTML i CSS przez sevenshow Początkujący (360 p.)
0 głosów
3 odpowiedzi 1,215 wizyt
0 głosów
2 odpowiedzi 2,758 wizyt
pytanie zadane 13 kwietnia 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,090 p.)

92,579 zapytań

141,432 odpowiedzi

319,657 komentarzy

61,963 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...