I am trying to make a carousel that you hover on a small image it will be shown in large size. I ran into some problem with my css hover::before. It makes the jQuery sometimes work sometimes it does not. Can someone have a solution? I have my own solution but it has compalibility issue with IE9
Note: I don't know why the code snipet doesn't render the boostrap link. It's a bit messy in the outcome. Please ignore that, thank you
$(document).ready(function(){
$('.menu').find('img').mouseenter(function(){
const display = $('#large-img').find('img') /*large img */
const source = $(this).attr('src') /*source of menu img*/
if (source != display.attr('src')) /*dont fade out when large img and menu img are the same */
display.fadeOut(100,function(){
$('#large-img').children().css('display','block').attr('src',`${source}`)
})
})
}).menu div{
position: relative;
}
.menu div:hover::before{
position: absolute;
content: "";
top: 6px;
bottom: 6px;
left: 6px;
right: 6px;
border: 3px solid tomato;
}
/* .menu img:hover{
outline: 3px solid tomato; <!-My solution-->
outline-offset: -3px;
} */<body>
<div class="container">
<div class="row">
<div class="col-xl-7 col-lg-7 py-5">
<div id="large-img">
<img class="img-fluid" src="https://source.unsplash.com/random/700x450" alt="">
</div>
<div class="menu d-flex justify-content-center">
<div class="p-2">
<img class="img-fluid" src="https://source.unsplash.com/random/700x450" width="100px" height="50px" alt="">
</div>
<div class="p-2">
<img class="img-fluid" src="https://source.unsplash.com/random/701x450" width="100px" height="50px" alt="">
</div>
<div class="p-2">
<img class="img-fluid" src="https://source.unsplash.com/random/702x450" width="100px" height="50px" alt="">
</div>
<div class="p-2">
<img class="img-fluid" src="https://source.unsplash.com/random/703x450" width="100px" height="50px" alt="">
</div>
<div class="p-2">
<img class="img-fluid" src="https://source.unsplash.com/random/704x450" width="100px" height="50px" alt="">
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js" integrity="sha512-WNLxfP/8cVYL9sj8Jnp6et0BkubLP31jhTG9vhL/F5uEZmg5wEzKoXp1kJslzPQWwPT1eyMiSxlKCgzHLOTOTQ==" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>Do you know jQuery Migrate? Try it if it will help you. If not, forget for IE9. Market share of IE9 is approx. 1.2%? https://www.stetic.com/market-share/browser/
You spend time for approx. 1% users and lose time for rest of 99% users.