如何解决CSS：Hover ::之前与jQuery中的mouseenter冲突
我正在尝试制作一个轮播，将您悬停在一个小图像上，它将以大尺寸显示。我的css hover :: before遇到了一些问题。它使jQuery有时可以工作，有时却不能。有人可以解决吗？ 我有自己的解决方案，但与IE9兼容。
注意：我不知道为什么代码片段没有渲染boostrap链接。结果有点混乱。请忽略它，谢谢
$(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>解决方法
您知道jQuery Migrate吗？如果有帮助，请尝试一下。如果没有，请忘记使用IE9。 IE9的市场份额约为。 1.2％？ https://www.stetic.com/market-share/browser/
您花费大约时间。 1％的用户，其余99％的用户则浪费时间。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。