When it comes to customizing the button color and hover effect, the code below does the job perfectly. However, there seems to be an issue where the button color reverts back to gray when the menu is open and the cursor moves away from the button. How can we go about personalizing the button when the menu is open?
Here's the existing code that functions correctly:
<style scoped>
/deep/ .dropdown > button {
color:#001E61;
background:#ffffff;
border-color:#001E61;
font-weight:bold;
}
/deep/ .dropdown > button:hover {
color:#E81F76;
background:#ffffff;
border-color:#E81F76;
font-weight:bold;
}
</style>
This is the code I've attempted in order to customize the button color when the menu is open:
<style scoped>
/deep/ .dropdown > button:hover,
.dropdown > button:active,
.dropdown > button:focus {
color:#E81F76;
background:#ffffff;
border-color:#E81F76;
font-weight:bold;
}
</scoped>