Nie wyświetla sie czarne tło jako hover

Question

Witam.

Tak wygląda kod:

https://jsfiddle.net/Krzysiek_35/yskw9z0t/32/

Chciałbym, aby po najechaniu na nieuruchomiony przycisk pojawiało sie czarne tło.

Czarne tło pojawia sie tylko przy uruchomionym przycisku.

Czy wiecie jak zrobić, aby pojawiało sie czarne tło po najechaniu kursorem na nieuruchomiony przycisk ?

Będę bardzo wdzięczny za fachową pomoc.

Comments

Wrzuć kod tutaj (w odpowiednie znaczniki)

---

<div id="button">
Odśwież stronę!
</div>
    
<div class="tab-content">
  <ul class="tablist" role="tablist">
    <li id="tab1" class="tab first" aria-controls="panel1" role="tab" aria-selected="true" tabindex="0">Strona główna</li>
    <li id="tab2" class="tab first" aria-controls="panel2" role="tab" aria-selected="false" tabindex="0">O stronie</li>
    <li id="tab3" class="tab last" aria-controls="panel3" role="tab" aria-selected="false" tabindex="0">Kontakt</li>
  </ul>
</div>

#button
{
    left: 5%;
    top: 4%;
	width: 150px;
	line-height: 30px;
    text-align: center;
	background-color: #000000;
	color: white;
    position: absolute;
}

.tab-content
{
	left: 5%;
	top: 15%;
	position: absolute;
}

.tablist
{
	padding: 0;
	list-style-type: none;
}

.tab, .one
{
	float: left;
	margin-left: 0px;
	width: 180px;
	line-height: 35px;
	background-color: #087380;
	color: #ffffff;
	letter-spacing: .025em;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	outline: none;
	margin-right: 8px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

.first:before
{
	left: 0;
	top: 0;
}

.last:before
{
	top: 0;
	right: 0;
	transform: rotate(90deg);
}

.tab:before, .one:before
{
	pointer-events: none;
	position: absolute;
	content: "";
	width: 0;
	height: 0;
	background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
	z-index: 100;
	-webkit-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: width, height;
	transition-property: width, height;
}

.tab:hover, .tab:active, .one:hover, .one:active
{
	color: #ffffff;
	cursor: pointer;
	background-color: #000000;
}

.tab:hover:before, .tab:active:before, .tab:after
{
	width: 20px;
	height: 20px;
}

.one:before
{
	width: 20px;
	height: 20px;
}

$(function() {

$("#tab1").addClass('one').css("background","black");

    $('#button').click(function() {
    $("#tab1").addClass('one').css("background","black");
    $("#tab2").removeClass('one').css("background","#087380");   
    $("#tab3").removeClass('one').css("background","#087380");
        });
    
    $('#tab1').click(function() {
    $("#tab1").addClass('one').css("background","black");
    $("#tab2").removeClass('one').css("background","#087380");   
    $("#tab3").removeClass('one').css("background","#087380");
        });
        
    $('#tab2').click(function() {
    $("#tab1").removeClass('one').css("background","#087380");
    $("#tab2").addClass('one').css("background","black");   
    $("#tab3").removeClass('one').css("background","#087380");
        });
        
    $('#tab3').click(function() {
    $("#tab1").removeClass('one').css("background","#087380");
    $("#tab2").removeClass('one').css("background","#087380");   
    $("#tab3").addClass('one').css("background","black");
        });
    
});

 

Answer 1

Wywal ten JS i wszystko śmiga jak złe :)

Comments

Gdy wywalisz JS, to po kliknięciu nie zostanie uruchomiony żaden przycisk.

Z tym JS, to po kliknięciu uruchamia sie przycisk (i tak ma być), ale nie pojawia sie czarne tło jako hover.

Bez JS nie wykonasz tego prawidłowo!

---

Już rozumiem. Taki skrypt jest dużo lepszy:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_active_element

---

Ten skrypt nie jest zły, ale stosując go - musiałbym to wszystko ogarniać od początku.

---

#button
{
    left: 5%;
    top: 4%;
    width: 150px;
    line-height: 30px;
    text-align: center;
    background-color: #000000;
    color: white;
    position: absolute;
}
 
.tab-content
{
    left: 5%;
    top: 15%;
    position: absolute;
}
 
.tablist
{
    padding: 0;
    list-style-type: none;
}
 
.tab
{
    float: left;
    margin-left: 0px;
    width: 180px;
    line-height: 35px;
    background-color: #087380;
    color: #ffffff;
    letter-spacing: .025em;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    outline: none;
    margin-right: 8px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}
.one
{
	float: left;
	margin-left: 0px;
	width: 180px;
	line-height: 35px;
	background-color: #000000;
	color: #ffffff;
	letter-spacing: .025em;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	outline: none;
	margin-right: 8px;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
}

 
.first:before
{
    left: 0;
    top: 0;
}
 
.last:before
{
    top: 0;
    right: 0;
    transform: rotate(90deg);
}
 
.tab:before, .one:before
{
    pointer-events: none;
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    background: linear-gradient(135deg, #363636 45%, #aaaaaa 50%, #cccccc 56%, white 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#000000');
    z-index: 100;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: width, height;
    transition-property: width, height;
}
 
.tab:hover, .tab:active, .one:hover, .one:active
{
    color: #ffffff;
    cursor: pointer;
    background-color: #000000;
}
 
.tab:hover:before, .tab:active:before, .tab:after
{
    width: 20px;
    height: 20px;
}
 
.one:before
{
    width: 20px;
    height: 20px;
}

JS

 

$(function() {
 
$("#tab1").addClass('one');
 
    $('#button').click(function() {
    $("#tab1").addClass('one');
    $("#tab2").removeClass('one');   
    $("#tab3").removeClass('one');
        });
     
    $('#tab1').click(function() {
    $("#tab1").addClass('one');
    $("#tab2").removeClass('one');   
    $("#tab3").removeClass('one');
        });
        
    $('#tab2').click(function() {
    $("#tab1").removeClass('one');
    $("#tab2").addClass('one');   
    $("#tab3").removeClass('one');
        });
        
    $('#tab3').click(function() {
    $("#tab1").removeClass('one');
    $("#tab2").removeClass('one');   
    $("#tab3").addClass('one');
        });
    
     
});

 

---

Za 10 minut sprawdzę Twoją poprawkę.

---

Teraz działa prawidłowo. Okazało sie, że błędy były nawet w JS.

Dzięki za pomoc.