Witam.
Chodzi mi o taki szczegół, ale istotny szczegół. Nad panelem mam 4 przyciski:
[Strona główna] [O stronie] [Ciekawostki] [Kontakt]. Każdy przycisk ma wysokość 40px.
Po najechaniu kursorem na każdy z tych przycisków, zmienia się kolor przycisku (hover).
Bez najechania kursorem - kolor tła każdego przycisku jest biały, natomiast po najechaniu kursorem - kolor tła każdego przycisku jest niebieski.
A teraz do rzeczy.
Gdy wchodzę na stronę, to automatycznie uruchomiony i zaznaczony jest przyciski [Strona główna].
Gdy najeżdżam kursorem po całym obszarze na przycisk nr 1 [Strona główna] oraz na przycisk nr 2 [O stronie], to jest OK.
Niestety, gdy najeżdżam kursorem na przycisk nr 3 [Ciekawostki] oraz na przycisk nr 4 [Kontakt], to muszę kursorem najechać na środek przycisku, aby zmienił się kolor tła na niebieski.
Inny wygląd kursora cursor: pointer nie jest pokazywany w górnej i dolnej części przycisku [Ciekawostki] oraz [Kontakt], tylko po środku. Bez sensu.
Co muszę poprawić w kodzie, aby ten hover działał na każdym przycisku jak należy?
<div id="content">
<ul class="tablist" role="tablist">
<li id="tab1" class="tab" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Strona główna</li>
<li id="tab2" class="tab" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">O stronie</li>
<li id="tab3" class="tab" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Ciekawostki</li>
<li id="tab4" class="tab" aria-controls="panel4" role="tab" aria-selected="false" tabindex="0">Kontakt</li>
</ul>
</div>
#content
{
height: 362px;
}
.tablist
{
margin: 0 0px;
padding: 0;
}
.tab
{
margin: .2em 7px 0 0;
color: black;
background-color: #FFFFFF;
font-size: 16px;
border-top-left-radius:.5em;
border-top-right-radius:.5em;
float: left;
display: inline;
margin-top: auto;
width: 180px;
line-height: 40px;
text-align: center;
}
.tab:hover
{
color: white;
background-color: #0000FF;
cursor: pointer;
}
.tab:last-child
{
float: right;
margin-right: 0px;
}
Zastosowałem dodatkowo taki zapis w CSS, ale nie przyniosło to żadnego efektu:
.tab:last-child:hover
{
color: white;
background-color: #0000FF;
line-height: 40px;
cursor: pointer;
}