I am currently working on creating interactive buttons that change an image when hovered over and clicked. The active button should have a specific class applied to it, which will be removed once another button is clicked.
However, I have encountered some issues with the implementation.
jQuery(document).ready(function($) {
$('.button-one').on('click mouseover', function() {
$('#change-image').attr('src', '/image-1.png');
$('.button-one').removeClass('btn-active');
$(this).addClass('btn-active');
});
$('.button-two').on('click mouseover', function() {
$('#change-image').attr('src', '/image-2.png');
$('.button-one').removeClass('btn-active');
$(this).addClass('btn-active');
});
$('.button-three').on('click mouseover', function() {
$('#change-image').attr('src', '/image-3.png');
$('.button-one').removeClass('btn-active');
$(this).addClass('btn-active');
});
});.button-container ul {
display: flex;
}
.btn li a {
padding: 9px 18px;
margin-right: 1em;
background: #8a8c8e;
color: #ffffff;
font-weight: bold;
font-size: 18px;
border: none;
display: block;
}
.btn li a:hover {
background: #ee2e24;
color: #ffffff;
display: block;
}
.btn li a.btn-active {
background: #ee2e24;
color: #ffffff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container"><img id="change-image" src="/image-1.png" alt="Image 1" /></div>
<div class="button-container">
<ul class="btn">
<li><a class="button-one">Image 1</a></li>
<li><a class="button-two">Image 2</a></li>
<li><a class="button-three">Image 3</a></li>
</ul>
</div>