jquery - Css :Hover::before 与 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>

标签： jquerycsscarousel

jquery - Css :Hover::before 与 jQuery 中的 mouseenter 冲突

问题描述

解决方案

推荐阅读