I successfully created an experiment using the code below, which is functioning more or less as intended. The goal was to have a link that opens a popup on hover while dimming the other links.
The current issue I am facing is that when the popup appears above the link, it starts to flicker, most likely due to confusion within the "hover" function. How can this be resolved?
<div class="container">
<a data-target="boxid1" class="link-box"><img src="https://via.placeholder.com/350x65"></a>
</div>
<div class="container">
<a data-target="boxid2" class="link-box"><img src="https://via.placeholder.com/350x65"></a>
</div>
<div class="container">
<a data-target="boxid3" class="link-box"><img src="https://via.placeholder.com/350x65"></a>
</div>
<div id="boxid1" class="modal-box">
Content Box 1
</div>
<div id="boxid2" class="modal-box">
Content Box 2
</div>
<div id="boxid3" class="modal-box">
Content Box 3
</div>
.container { background: black; color: white; padding: 50px; float: left; border: 1px solid red; margin: 5px; text-align: center; }
.modal-box { display: none; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); background: blue; color: white; padding: 25px; width: 250px; height: 200px; }
.dim { opacity: 0.3; }
$(function(){
$('.link-box').hover(function(e){
var $parent=$(this).closest('.container');
$('.container').not($parent).addClass('dim');
$('#'+$(this).attr('data-target')).show();},
function(e) {
var $parent=$(this).closest('.container');
$('.container').not($parent).removeClass('dim');
$('#'+$(this).attr('data-target')).hide();
}
);
});