Как я могу использовать менее динамично
У меня есть кнопка начальной загрузки на моей html-странице:
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
немного ниже у меня есть это:
<div class = "navbar-collapse collapse">
когда я нахожу указатель мыши на кнопку, цвет фона меняется на значение, которое я ожидаю с помощью этого селектора:
.navbar-header > .navbar-toggle:hover {
background-color: #9c83bb;
color: #fff;
}
Когда я нажимаю кнопку, целевой div меняется на:
<div class = "navbar-collapse collapse on">
Поэтому, используя Less, я хочу иметь возможность сохранить цвет фона при наведении курсора, пока к целевому div привязано «on».
Похоже, вы хотите использовать .navbar-toggle: focus?
@DBS Я добавил `.navbar-collapse & .on {background-color: # 9c83bb; } `в мою таблицу стилей, но это не имело значения
@MikeRodham Нет, я не думаю, что мне действительно нужен focus, потому что мышь может не быть на кнопке. Когда к цели прикреплен on с помощью начальной загрузки, отображаются пункты меню ниже родительского. Я могу не навести указатель мыши на исходный класс navbar-toggle, и он все еще может не иметь фокуса, это может быть элемент меню, который имеет фокус, но пока on прикреплен к цели, я хочу, чтобы мой фон оставался
Ответы 1
Less - это просто препроцессор, он не предоставит вам возможности вернуться к предыдущему элементу и изменить его классы или стиль в зависимости от существования класса в отдельном элементе ниже в DOM. Если вы хотите это сделать, вам понадобится JavaScript.
Другой способ сделать это - изменить элементы полностью независимо друг от друга, но все же предоставить им обоим переключаемое состояние. Более конкретно: измените кнопку на флажок, скройте флажок и стилизуйте метку. У вас все еще могут быть атрибуты данных data-toggle и data-target в вашем элементе, это будет просто другой тип элемента.
input.navbar-toggle ~ label:hover {
background-color: #9c83bb;
color: #fff;
}
input.navbar-toggle {
display: none;
}
input.navbar-toggle ~ label {
border: 1px solid black;
padding: 2px;
border-radius: 3px;
}
input.navbar-toggle:checked ~ label {
color: #fff;
background-color: #9c83bb;
}<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
<input type='checkbox' id = "navbar-toggle-input" class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' /><label for = "navbar-toggle-input">Toggle</label>
<div class = "navbar-collapse collapse">Navbar!<div>Редактировать:
Если вы хотите сделать то же самое с JavaScript:
document.getElementById('navbar-toggle-button').addEventListener('click', function() {
var target = this.dataset.target.replace('.', '');
var element = document.getElementsByClassName(target)[0] // This is lazy, don't do this. It's just for testing
if (hasClass(element, 'show')) {
this.style.color = 'white';
this.style.backgroundColor = 'black';
} else {
this.style.color = '#fff';
this.style.backgroundColor = '#9c83bb';
}
});
function hasClass(target, className) {
return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}button.navbar-toggle:hover {
background-color: #9c83bb;
color: #fff;
}
button.navbar-toggle {
background-color: black;
color: white;
}<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
<button type='button' id = "navbar-toggle-button" class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>Toggle</button>
<div class = "navbar-collapse collapse">Navbar!<div>Спасибо за это. Я выбрал метод флажка и метку, однако сейчас я не могу отображать диапазоны панели значков. Имею следующий <label for = "navbar-toggle-input"> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar'></span> <span class='icon-bar'></span> <span class='icon-bar'></span> </label>
Я не уверен, что полностью понимаю, разве вам не нужен
&.on{ background-color: #9c83bb; }в стиле.navbar-collapse?