Question

我正在整个文本中使用工具提示音符处理参考项目，并且我希望在显示工具提示时突出显示受注释影响的文本。我当前的代码有一个错误，显示第一个注释突出显示正确的文本，但显示后续注释会突出显示第一个注释中的文本，而不是它自己的文本。我是javascript的新手，所以我很可能犯了一个菜鸟错误，但我认为问题是我使用的getElementById只能使用一次，但如果我应该使用getElementsByClassName代替，如何告诉它何时获取哪个节点？我知道getElementsByClassName返回整个数组，我需要一种方法一次只返回一个节点。我还没有能够自己解决这个问题，所以非常感谢你的帮助。下面是我的代码的一个简化示例，它演示了我的问题。非常感谢你的帮助！

＆＃13;

<!DOCTYPE html>
<html>

<head>

    <style>
        mark {
            background-color: white
        }
        /* now <mark> is only effective at my discretion */
        
        sup {
            vertical-align: text-top;
            font-style: italic
        }
        
        a:link {
            text-decoration: none
        }
        
        a:visited {
            color: blue
        }
        
        a:hover {
            text-decoration: underline
        }
        /* these describe the appearance and behavior of tooltips */
        
        a.tooltips {
            position: relative;
            display: inline
        }
        
        a.tooltips span {
            position: absolute;
            width: 70px;
            color: #FFFFFF;
            background: #000000;
            height: 25px;
            line-height: 25px;
            text-align: center;
            visibility: hidden;
        }
        
        a:hover.tooltips span {
            visibility: visible;
            font-size: 0.8em;
            top: 22px;
            left: 50%;
            margin-left: -43px;
            z-index: 999;
        }
        
        a.tooltips span:after {
            content: '';
            position: absolute;
            bottom: 100%;
            left: 50%;
            width: 0;
            height: 0;
            border-bottom: 8px solid #000000;
            border-right: 8px solid transparent;
            border-left: 8px solid transparent;
        }
    </style>

    <script>
        function seeNote() // <mark> is now activated
        {
            document.getElementById("note").style.backgroundColor = "yellow"
        }

        function hideNote() // <mark> is now deactivated
        {
            document.getElementById("note").style.backgroundColor = "white"
        }
    </script>

    <title>Bug Demonstration</title>
</head>

<body>
    Mousing over note <i>a</i> highlights
    <a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">a</sup><span>note <i>a</i></span></a>
    <mark id="note">affected text</mark> as intended,
    <br> but mousing over note <i>b</i> highlights
    <a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">b</sup><span>note <i>b</i></span></a>
    <mark id="note">note <i>a</i>'s text</mark> instead of note <i>b</i>'s text.
</body>

</html>

＆＃13;

Answer 1

问题解决了！我在另一个网站上看到了类似于我预期效果的内容并查看了其来源;事实证明，没有任何脚本可以做到这一点！仅使用CSS中<a>元素的额外样式就可以实现整个效果，如下所示：

一个。删除所有JavaScript 湾删除所有<mark>代码及其CSS，并移动每个</a>以替换每个</mark> C。从所有href="#"标记中删除<a> d。将此代码插入CSS：

＆＃13;

/* affected text highlighted... */
a:hover.tooltips {
    background-color: yellow;
}

/* ...but not the superscript letter */
a:hover.tooltips sup {
    background-color: white;
}

＆＃13;

一次更改一个类中的元素？

1 个答案: