javascript - 如何在滚动隐藏/显示文本时将光标更改为 "finger pointer"(javascript)

Question

在我的网站上，我有一些隐藏/显示 JavaScript(如下)。它通常用在常见问题解答中，您可以在其中看到问题列表，当滚动问题时它会改变颜色并单击它会打开文本。

我希望在滚动文本时将光标更改为“手指指针”(链接某些内容时的通常形状)。

下面的代码中应该添加什么？

“我的文本”一词代表我专门针对我的网站输入的各种文本。

谢谢!

<a onclick="javascript:ShowHide('item')"> MY TEXT </a>
<div class="mid" id="item" style="display: none;"><p> MY TEXT </p></div>
<br>

<script type="text/javascript">// <![CDATA[
    function ShowHide(divId)
    {
        if(document.getElementById(divId).style.display == 'none')
        {
            document.getElementById(divId).style.display='block';
        }
        else
        {
            document.getElementById(divId).style.display = 'none';
        }
    }
    // ]]>
</script>

Answer 1

添加光标:指针;CSS规则:

<a style="cursor:pointer;" onclick="javascript:ShowHide('item')"> MY TEXT </a>

此外，您还可以使 JS 更漂亮一点:

<script>// <![CDATA[
function ShowHide(divId){
   var el = document.getElementById(divId);
   el.style.display = el.style.display === "none" ? "block" : "none";
}
// ]]></script>

我还建议您:不要使用内联样式。
创建样式表，使用类，设置这些类的样式，然后将这些类分配给您的 HTML 元素。

例如:

a {
    cursor: pointer;
    text-decoration:none;
    color: orange;
    /* etc... style here your anchors */
}
a:hover {
    /* place here style for the hovered anchors */
}
.hidden {   /* add that class to any HTML element you want initially hidden */
    display:none;
}