jquery 鼠标悬停时的鼠标光标变化，针对特定类

qrjkbowd 于 2023-03-22 发布在 jQuery

关注(0)|答案(2)|浏览(200)

我得到了这个鼠标悬停效果，你可以在this CodePen上看到。
光标始终是红色的，但我希望当它悬停在其中一个项目上时，它会变成一个更大（缩放）的白色光标。
<div class="custom-cursor"></div>（这是光标div，它总是红色的，通过JS我让这个div跟随我的光标）。
然后我们有我们的元素：

<div class="row-02-rig-sin black-cursor">
...
</div>

上面是<div>，我想让光标改变形状和颜色。为了做到这一点，我做了一个eventListener，这样我就可以跟踪鼠标何时经过.black-cursor的类名。下面是它的JS代码：

document.addEventListener("mouseover", function (e) {
  if (e.target.matches(".black-cursor")) {
    customCursor.classList.add("is-hovering");
  }
});

当鼠标悬停在div上时，上面的代码“应该”工作（并且部分工作），但问题是，当光标悬停在.black-cursor内部的元素上时，e.target.matches()不会触发。
使用简单的CSS，当光标悬停在.black-cursor上时，我会改变光标，因为当它返回true时，会有customCursor.classList.add("is-hovering");。
x1米11米1x
试着在CodePen中玩一下，光标正好放在黑色水平条的顶部。这是e.target唯一等于正确元素的地方，所以它在那里触发，而不是其他地方。
一个简单的解决方法是跟踪e.target是否是.black-cursor父节点的子节点。我可以在每个元素上添加类名.black-cursor，这样我就可以确保光标正常工作。但我不喜欢这两种解决方案。第一种是耗时的结束-由于计算的原因，mousemove和第二种解决方案会花费开发人员大量的时间来为所有元素添加相同的类名。
有没有其他的解决方案与性能的优先级？所以没有滞后，没有fps下降会出现.我听说过一个requestAnimationFrame在这里和那里，但我还没有尝试，因为我不知道它是否会帮助我.

jquery

来源：https://stackoverflow.com/questions/75801586/mouse-cursor-change-on-mouseover-for-specific-classes

2条答案

按热度按时间

lo8azlld1#

您需要使mouseout代码更智能，这样它就不会在每次调用该类时都删除该类。
这个解决方案还不完美，但应该给予你一个起点。

jQuery(document).ready(function () {
    var customCursor = document.querySelector(".custom-cursor");
    document.addEventListener("mousemove", moveCursor);
    document.addEventListener("scroll", moveCursor);
    document.addEventListener("mouseover", function (e) {
        if (e.target.matches && e.target.matches(".black-cursor")) {
            customCursor.classList.add("is-hovering");
        }
    });
    document.addEventListener("mouseout", function (e) {
    if (e.target.closest(".black-cursor")) return;
        customCursor.classList.remove("is-hovering");
    });
    function moveCursor(e) {
        customCursor.style.top = e.clientY + "px";
        customCursor.style.left = e.clientX + "px";
    }
});

body{
    background-color:beige;
}

.custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 100%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.3s ease;
  }
  .custom-cursor.is-hovering {
    transform: translate(-50%, -50%) scale(4);
        background-color:white;
  }



.row-02 {
    width: 600px;
    margin: 0 auto;
    display: flex;
    padding: 120px 0;
    justify-content: space-between;
}
.row-02-rig {
    display: flex;
    flex-direction: column;
    gap: 60px;
}
.row-02-rig-sin {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.row-02-rig-sin::before {
    content: "";
    position: absolute;
    top: -20px;
    width: 100%;
    height: 2px;
    background-color: #000;
}
.row-02-rig-sin-lef {
    background-color:aqua;
    width:100px;
    display: flex;
}
.row-02-rig-sin-rig {
    width:500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.row-02-rig-sin-rig-top {
    width:500px;
    background-color:navy;
}
.row-02-rig-sin-rig-top a {
    color: #fff;
}
.row-02-rig-sin-rig-bot {
    width:500px;
    display: flex;
    background-color:blue;
}
.row-02-rig-sin-rig-bot-lef {
    width:100px;
    display: flex;
    flex-direction: column;
    background-color:pink;
    gap: 8px;
}
.row-02-rig-sin-rig-bot-rig {
    width:400px;
    display: flex;
    flex-direction: column;
    background-color:blueviolet;
    gap: 8px;
}
.row-02-rig-sin-rig-bot-rig-sin {
    font-weight: bold;
}
.row-02-rig-sin-rig-bot-rig-sin br {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="custom-cursor"></div>

<div class="row-02">
    <div class="row-02-rig">

        <div class="row-02-rig-sin black-cursor">
            <div class="row-02-rig-sin-lef">.2018</div>
            <div class="row-02-rig-sin-rig">
                <div class="row-02-rig-sin-rig-top"><a href="#">PROJECT TITLE HERE</a></div>
                <div class="row-02-rig-sin-rig-bot">
                    <div class="row-02-rig-sin-rig-bot-lef">
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Τοποθεσία</div>
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Τομέας</div>
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Προϊόντα</div>
                    </div>
                    <div class="row-02-rig-sin-rig-bot-rig">
                        <div class="row-02-rig-sin-rig-bot-rig-sin">ΒΙ.ΠΕ. Κιλκίς</div>
                        <div class="row-02-rig-sin-rig-bot-rig-sin">Έργα Υποδομής</div>
                        <div class="row-02-rig-sin-rig-bot-rig-sin">Τσιμεντόστυλοι</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row-02-rig-sin black-cursor">
            <div class="row-02-rig-sin-lef">.2018</div>
            <div class="row-02-rig-sin-rig">
                <div class="row-02-rig-sin-rig-top"><a href="#">PROJECT TITLE HERE</a></div>
                <div class="row-02-rig-sin-rig-bot">
                    <div class="row-02-rig-sin-rig-bot-lef">
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Τοποθεσία</div>
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Τομέας</div>
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Προϊόντα</div>
                    </div>
                    <div class="row-02-rig-sin-rig-bot-rig">
                        <div class="row-02-rig-sin-rig-bot-rig-sin">ΒΙ.ΠΕ. Κιλκίς</div>
                        <div class="row-02-rig-sin-rig-bot-rig-sin">Έργα Υποδομής</div>
                        <div class="row-02-rig-sin-rig-bot-rig-sin">Τσιμεντόστυλοι</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row-02-rig-sin black-cursor">
            <div class="row-02-rig-sin-lef">.2018</div>
            <div class="row-02-rig-sin-rig">
                <div class="row-02-rig-sin-rig-top"><a href="#">PROJECT TITLE HERE</a></div>
                <div class="row-02-rig-sin-rig-bot">
                    <div class="row-02-rig-sin-rig-bot-lef">
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Τοποθεσία</div>
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Τομέας</div>
                        <div class="row-02-rig-sin-rig-bot-lef-sin">Προϊόντα</div>
                    </div>
                    <div class="row-02-rig-sin-rig-bot-rig">
                        <div class="row-02-rig-sin-rig-bot-rig-sin">ΒΙ.ΠΕ. Κιλκίς</div>
                        <div class="row-02-rig-sin-rig-bot-rig-sin">Έργα Υποδομής</div>
                        <div class="row-02-rig-sin-rig-bot-rig-sin">Τσιμεντόστυλοι</div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</div>

赞(0）回复(0）举报 2023-03-22

qhhrdooz2#

CodePen已更新为正确代码：
这个被替换了。。

document.addEventListener( 'mouseover', function( e ) {
    if ( e.target.matches('.black-cursor') ) {
      customCursor.classList.add( 'is-hovering' );
    }
  });

  document.addEventListener( 'mouseout', function( e ) {
    customCursor.classList.remove( 'is-hovering' );
  });

......用这个：

jQuery('.black-cursor').mouseover(function(){
    jQuery('.custom-cursor').addClass('is-hovering');
    return false;
  }).mouseout(function(){
    jQuery('.custom-cursor').removeClass('is-hovering');
  });

赞(0）回复(0）举报 2023-03-22

我来回答

jquery 鼠标悬停时的鼠标光标变化，针对特定类

2条答案

相关问题

热门标签

最新问答