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

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

VPS Starter Arubacloud
+1 głos
756 wizyt
pytanie zadane 22 czerwca 2016 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
zamknięte 26 czerwca 2016 przez Krzysiek_34

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

 

komentarz zamknięcia: Problem nie został do końca rozwiązany.

2 odpowiedzi

0 głosów
odpowiedź 22 czerwca 2016 przez xmentor Nałogowiec (49,520 p.)
0 głosów
odpowiedź 22 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
Wrzuciłem na codepen to co podałeś i wszystko działa jak należy. Pokaż cały kod i wtedy coś zdziałamy ;)
komentarz 22 czerwca 2016 przez Krzysiek_34 Mądrala (6,050 p.)

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.

komentarz 22 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
http://codepen.io/mitelak/pen/gMLXoK tak to teraz wygląda, a Twój problem się nie pojawił nadal ;)
komentarz 22 czerwca 2016 przez Krzysiek_34 Mądrala (6,050 p.)
Nie widzę tam kodu na codepen.io. Jeśli wprowadzałeś jakieś poprawki, to tutaj wklej kod, OK?
komentarz 22 czerwca 2016 przez mitelak Pasjonat (23,330 p.)
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
komentarz 22 czerwca 2016 przez Krzysiek_34 Mądrala (6,050 p.)
edycja 22 czerwca 2016 przez Krzysiek_34
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.

Podobne pytania

+1 głos
1 odpowiedź 245 wizyt
pytanie zadane 23 listopada 2022 w HTML i CSS przez MacieKap Bywalec (2,400 p.)
0 głosów
1 odpowiedź 538 wizyt
pytanie zadane 20 marca 2020 w HTML i CSS przez Krzysiek_34 Mądrala (6,050 p.)
0 głosów
1 odpowiedź 304 wizyt
pytanie zadane 5 stycznia 2018 w HTML i CSS przez Tigran Hovsepyan Nowicjusz (120 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...