将鼠标指针更改为锚点样式

Change the mouse cursor on mouse over to anchor-like style

本文关键字：样式 鼠标指针      更新时间：2023-09-26

如果我将鼠标悬停在div上，鼠标光标将更改为像HTML锚一样的光标。

我该怎么做?

假设你的div有一个id="myDiv"，添加以下的CSS。cursor: pointer指定光标应该是用于锚点(超链接)的相同的手图标:

添加CSS 

#myDiv
{
    cursor: pointer;
}

您可以简单地将光标样式添加到div的HTML中，如下所示:

<div style="cursor: pointer">
</div>
编辑:

如果您决定使用jQuery，那么将以下行添加到您的$(document).ready()或body onload中:(将myClass替换为所有div共享的任何类)

$('.myClass').css('cursor', 'pointer');

如果你想在jQuery而不是CSS中做到这一点，你基本上遵循相同的过程。

假设您有一些<div id="target"></div>，您可以使用以下代码:

$("#target").hover(function() {
    $(this).css('cursor','pointer');
}, function() {
    $(this).css('cursor','auto');
});

应该可以了

实际上不需要jQuery，只需要CSS。例如，下面是一些HTML:

<div class="special"></div>

这里是CSS:

.special
{
    cursor: pointer;
}

这将

#myDiv
{
    cursor: pointer;
}

我认为:hover在以上答案中缺失。下面是必要的。(如果需要CSS)

#myDiv:hover
{
    cursor: pointer;
}

截至2022年，JQuery可以安全地替换为普通JS。以下是如何更改div的样式。假设div有id="myDiv"，则:

const myDivElem = document.querySelector("#myDiv");
myDiv.style.cursor = "pointer";

其中querySelector的参数可以是任意CSS选择器

相关文章：