My website features 4 clickable service buttons on the homepage, each with a unique hover effect (background-color change) when users interact with them. While this setup works well overall, I am looking to highlight the FIRST button as the most important service by making it appear "active" with the hover effect (background color) when users first visit the page. If they hover over any of the other buttons, the first button should return to its standard background color.
To achieve this, I initially used the nth:first-child selector in CSS to give the first button its highlighted color. However, this solution had a drawback - the button did not revert back to its original color when users hovered over other buttons.
I am now considering using jQuery to address this issue. Although it may not be the cleanest solution, it gets the job done for now. I wonder if there is a better way to handle this scenario without resorting to jQuery?
https://i.sstatic.net/bonzw.jpg
UPDATE: With some jQuery tweaks, I managed to make it work. While my current solution functions adequately, I can't help but think that there might be a more efficient method to achieve the desired outcome. Any suggestions for improvement are welcome!
jQuery(document).ready(function($){
// Add hover class to first button
$('.service-button.totalentreprise').addClass('bg-orange');
$('.service-button').hover(
function() {
// Remove hover class from first button
$('.service-button.totalentreprise').removeClass('bg-orange');
// Add hover class to any button
$( this ).addClass('bg-orange');
}, function() {
$( this ).removeClass('bg-orange');
}
);
});