Изменение стиля

340

15 марта 2017, 18:57

Почему после нажатия пропадает стиль для :hover ? - Как этого избежать ? Желательно объяснить как для "незнайки" ;)

function bomba() { 
document.getElementById('1_1').style.borderBottom='2px solid #d04'; 
document.getElementById('1_2').style.borderBottom='2px solid #fff'; 
document.getElementById('1_3').style.borderBottom='2px solid #fff'; 
} 
 
function bomba2() { 
document.getElementById('1_1').style.borderBottom='2px solid #fff'; 
document.getElementById('1_2').style.borderBottom='2px solid #d04'; 
document.getElementById('1_3').style.borderBottom='2px solid #fff'; 
} 
 
function bomba3() { 
document.getElementById('1_1').style.borderBottom='2px solid #fff'; 
document.getElementById('1_2').style.borderBottom='2px solid #fff'; 
document.getElementById('1_3').style.borderBottom='2px solid #d04'; 
}

ul { 
    list-style:none; 
} 
 
li { 
    display:inline; 
} 
 
.bomba li{ 
    border-bottom: 2px solid transparent; 
    padding-bottom: 4px; 
} 
.bomba li:hover{ 
    border-bottom: 2px solid gray; 
    padding-bottom: 4px; 
}

<ul  class="bomba"> 
   <li id="1_1" onclick="bomba()">Кукушка</li> 
   <li id="1_2" onclick="bomba2()">Воробей</li> 
   <li id="1_3" onclick="bomba3()">Грач</li> 
</ul>

Answer 1

При клике вы назначаете стиль inline:

document.getElementById('1_1').style.borderBottom='2px solid #fff';

inline означает внутри тега, те. так:

<li ... style="border-bottom: 2px solid rgb(221, 0, 68);">...</li>

Стиль inline имеет всегда больший приоритет по сравнению с обычными стилями. За исключением метки !important:

function bomba() { 
document.getElementById('1_1').style.borderBottom='2px solid #d04'; 
document.getElementById('1_2').style.borderBottom='2px solid #fff'; 
document.getElementById('1_3').style.borderBottom='2px solid #fff'; 
} 
 
function bomba2() { 
document.getElementById('1_1').style.borderBottom='2px solid #fff'; 
document.getElementById('1_2').style.borderBottom='2px solid #d04'; 
document.getElementById('1_3').style.borderBottom='2px solid #fff'; 
} 
 
function bomba3() { 
document.getElementById('1_1').style.borderBottom='2px solid #fff'; 
document.getElementById('1_2').style.borderBottom='2px solid #fff'; 
document.getElementById('1_3').style.borderBottom='2px solid #d04'; 
}

ul { 
    list-style:none; 
} 
 
li { 
    display:inline; 
} 
 
.bomba li{ 
    border-bottom: 2px solid transparent; 
    padding-bottom: 4px; 
} 
.bomba li:hover{ 
    border-bottom: 2px solid gray !important; /*Здесь теперь будет больший приоритет*/ 
    padding-bottom: 4px; 
}

<ul  class="bomba"> 
   <li id="1_1" onclick="bomba()">Кукушка</li> 
   <li id="1_2" onclick="bomba2()">Воробей</li> 
   <li id="1_3" onclick="bomba3()">Грач</li> 
</ul>

Однако, не рекомендую использовать !important без крайней необходимости. Все что нужно сделать - назначить класс при клике:

document.getElementById("1_1").className = "active";

и этот класс кастомизировать обычными стилями:

.bomba li.active{
    border-bottom: 2px solid red;
}

function bomba() { 
document.getElementById("1_1").className = "active"; 
document.getElementById("1_2").className = ""; 
document.getElementById("1_3").className = ""; 
} 
 
function bomba2() { 
document.getElementById("1_1").className = ""; 
document.getElementById("1_2").className = "active"; 
document.getElementById("1_3").className = ""; 
} 
 
function bomba3() { 
document.getElementById("1_1").className = ""; 
document.getElementById("1_2").className = ""; 
document.getElementById("1_3").className = "active"; 
}

ul { 
    list-style:none; 
} 
 
li { 
    display:inline; 
} 
 
.bomba li{ 
    border-bottom: 2px solid transparent; 
    padding-bottom: 4px; 
} 
.bomba li.active{ 
    border-bottom: 2px solid red; 
} 
 
.bomba li:hover{ 
    border-bottom: 2px solid gray;  
    padding-bottom: 4px; 
} 
 
.bomba li.active:hover{/*стиль для активного и подсвеченного элемента*/ 
    border-bottom: 4px solid red;  
    padding-bottom: 4px; 
}

<ul  class="bomba"> 
   <li id="1_1" onclick="bomba()">Кукушка</li> 
   <li id="1_2" onclick="bomba2()">Воробей</li> 
   <li id="1_3" onclick="bomba3()">Грач</li> 
</ul>