Hover nie działa na każdym przycisku tak jak powinien.

Question

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;
}

 

Answer 1

http://codepen.io/kkondratowicz/pen/BzQmJq - działa ten twój kod

Answer 2

Wrzuciłem na codepen to co podałeś i wszystko działa jak należy. Pokaż cały kod i wtedy coś zdziałamy ;)

Comments

Dorzucę trochę kodu do HTML + cały JS:

<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 id="panel1" class="panel-1" aria-labelledby="tab1" role="tabpanel" aria-hidden="false">
		Strona główna
	</div>

	<div id="panel2" class="panel-2" aria-labelledby="tab2" role="tabpanel" aria-hidden="true">
		O stronie
	</div>

	<div id="panel3" class="panel-3" aria-labelledby="tab3" role="tabpanel" aria-hidden="true">
		Ciekawostki
	</div>

	<div id="panel4" class="panel-4" aria-labelledby="tab4" role="tabpanel" aria-hidden="true">
		Kontakt
	</div>

</div>

JavaScript:

<script type="text/javascript">
	$(document).ready(function(){
		$("li[role='tab']").click(function(){
			$("li[role='tab']:not(this)").attr("aria-selected","false");

			$(this).attr("aria-selected","true");

			var tabpanid= $(this).attr("aria-controls");
			var tabpan = $("#"+tabpanid);
			$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
			$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

			tabpan.removeClass("hidden");

			tabpan.attr("aria-hidden","false");
		});

		$("li[role='tab']").keydown(function(ev) {
			if (ev.which ==13) {
				$(this).click();
			}
		});

		$("li[role='tab']").keydown(function(ev) {
			if ((ev.which ==39)||(ev.which ==37))  {
				var selected= $(this).attr("aria-selected");
				if  (selected =="true"){
						$("li[aria-selected='false']").attr("aria-selected","true").focus();
						$(this).attr("aria-selected","false");

					  var tabpanid= $("li[aria-selected='true']").attr("aria-controls");
					   var tabpan = $("#"+tabpanid);
					$("div[role='tabpanel']:not(tabpan)").attr("aria-hidden","true");
					$("div[role='tabpanel']:not(tabpan)").addClass("hidden");

					tabpan.attr("aria-hidden","false");
					tabpan.removeClass("hidden");
				}
			}
		});

	});
</script>

Całego CSS-a podałem wcześniej odpowiadającego za przyciski i hovera.

.tab odpowiada za przyciski

.tab:hover odpowiada za kolor tła przycisków po najechaniu kursorem

.tab:last-child odpowiada za to, że przycisk nr 4 [Kontakt] znajduje się po prawej stronie i został przesunięty z dala od przycisku nr 3

Przycisk nr 1, 2 i 3 znajdują się po lewej stronie tuż obok siebie, a przycisk nr 4 znajduje się wyjątkowo po prawej stronie z dala od przycisku nr 3.

---

http://codepen.io/mitelak/pen/gMLXoK tak to teraz wygląda, a Twój problem się nie pojawił nadal ;)

---

Nie widzę tam kodu na codepen.io. Jeśli wprowadzałeś jakieś poprawki, to tutaj wklej kod, OK?

---

Jest to wklejony Twój kod, który działa :) Dlatego zależało mi na całości, bo to może jakiś zupełnie inny element zasłaniać na przykład

---

Podałem cały kod HTML + CSS + JS odpowiadający za działanie tych przycisków razem z hoverem.

Ciekawostka ---> gdy mam uruchomiony przycisk nr 2 [O stronie], to na przycisku nr 3 i 4 hover działa jak należy.