将鼠标光标更改为类似锚的样式

Posted 2023-03-05

【中文标题】将鼠标光标更改为类似锚的样式

【英文标题】：Change the mouse cursor on mouse over to anchor-like style

【发布时间】：2011-11-03 08:15:32

【问题描述】：

如果我将鼠标悬停在 div 上，鼠标光标将变为 html 锚点中的光标。

我该怎么做？我需要 javascript 还是只能使用 CSS？

【参考方案1】：

假设您的 div 有一个 id="myDiv"，请将以下内容添加到您的 CSS 中。 cursor: pointer 指定光标应与用于锚点（超链接）的手形图标相同：

要添加的 CSS

#myDiv

    cursor: pointer;

您可以像这样简单地将光标样式添加到 div 的 HTML 中：

<div style="cursor: pointer">

</div>

编辑：

如果您决定为此使用 jQuery，则将以下行添加到您的 $(document).ready() 或正文 onload：（将 myClass 替换为您所有 divs 共享的任何类）

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

【讨论】：

我想用jquery而不是css来做这个

@guru：不需要编写脚本。您需要做的就是将style="cursor: pointer" 添加到您的div 的HTML 中。我会用一个例子来编辑我的答案。

同一类有五个部门，我不能添加到所有这些 "style="cursor:pointer"

@guru，如果所有 div 都具有相同的类，那么您实际上可以在页面的 CSS 文件中为该类的 CSS 规则添加“光标：指针”

如果问题是定位问题，那么正如贾斯汀已经问过的那样，正如每个人总是要问的那样，发布代码以便我们帮助您附上它

【参考方案2】：

如果你想用 jQuery 而不是 CSS 来做这件事，你基本上遵循相同的过程。

假设你有一些<div id="target"></div>，你可以使用下面的代码：

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

应该这样做。

【讨论】：

这是多余的，因为div 的光标仅在鼠标悬停时可见。一旦用户将鼠标悬停在外面，就没有理由将其删除，因为此时光标无论如何都不会被看到。

虽然这个问题被问得非常狭隘（关于 DIV），但这个答案适用于广泛。它适用于任何 HTML 元素，例如表格、

【参考方案3】：

您实际上不需要 jQuery，只需要 CSS。例如，这里有一些 HTML：

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

这是 CSS：

.special

    cursor: pointer;

【参考方案4】：

这会

#myDiv

    cursor: pointer;

【参考方案5】：

我认为上述答案中缺少:hover。所以下面会做必要的事情。（如果需要css）

#myDiv:hover

    cursor: pointer;

【讨论】：

在没有 :hover 的情况下为我工作，并且可能更多，因为答案有很多正面投票。你试过了吗？