Is there a way to apply a style to all my .btn elements when hovering, except for those with the .dropdown-toggle class? I've tried a couple of methods but ran into some issues:
attempt 1:
.btn:not(.dropdown-toggle):hover {
background-color: inherit;
}
Unfortunately, this didn't work as expected. It seems to be applying the hover style even when clicking the buttons.
attempt 2:
div:not(.dropdown) > .btn:hover {
background-color: inherit;
}
I had high hopes for this one, but it's exhibiting the same behavior as the previous attempt.
Upon further investigation, I realized that the issue might be due to the button having both :active and :hover states simultaneously when clicked. Since the selector for :hover is more specific than :active, it overrides the latter. Is this the cause?
Below is the code example. The expected behavior is for the background of the 'Regular button' to turn light blue when clicked, but it is showing the red hover background-color instead. Only when clicking and dragging the mouse off the button does it display the :active color properly.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
<link href="application.css" rel="stylesheet">
</head>
<body>
<button class="btn btn-outline-primary">Regular button</button>
<div class="dropdown">
<button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown">Dropdown button</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List item</a></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
application.css
.btn:not(.dropdown-toggle):hover {
background-color: red;
}
Here is the JFiddle:
https://jsfiddle.net/29u643Lr/21/