Hello everyone! I have been working on a simple hover color change effect using jQuery, but I noticed that I am repeating the code for different buttons and service icons. Is there a way to achieve the same result so that when a button is hovered, the corresponding service icon changes color without repeating the code multiple times like below?
$(document).ready(function() {
$('.btn-1').hover(function() {
$('.service-icon-1').css('color', '#05FAB8');
},function(){
$('.service-icon-1').css('color', '');
});
});
$(document).ready(function() {
$('.btn-2').hover(function() {
$('.service-icon-2').css('color', '#05FAB8');
},function(){
$('.service-icon-2').css('color', '');
});
});
$(document).ready(function() {
$('.btn-3').hover(function() {
$('.service-icon-3').css('color', '#05FAB8');
},function(){
$('.service-icon-3').css('color', '');
});
});