how can I use less dynamically - css

Question

I have a bootstrap button on my html page:
<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>
a bit further down I have this:
<div class="navbar-collapse collapse">
when I hover over my button the background-color changes to the value that I expect using this selector:
.navbar-header > .navbar-toggle:hover {
background-color: #9c83bb;
color: #fff;
}
When I click my button the target div changes to:
<div class="navbar-collapse collapse on">
So using Less I want to be able to keep the color of the hover background while 'on' is attached to the target div.

Answer 1

Less is just a preprocessor, it's not going to provide you with the ability to go back to a previous element and change its classes or styling depending on the existence of a class on a separate element lower in the DOM. If you want to do that, you're going to need JavaScript.
A different way to do this would be to alter the elements completely independent of eachother, but still provide both of them with a toggleable state. More specifically: change the button into a checkbox, hide the checkbox, and style the label. You can still have the data attributes data-toggle and data-target on your element, it will just be a different type of element.
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>
Edit:
If you wanted to do the same thing with 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>