Question

我有一个textarea和一个div。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
    <title>Test</title>
    <script type="text/javascript" src="JSFile.js"></script>
    <style type="text/css">
        .hidden {visibility: hidden;}           
    </style>
</head>
<body>
    <textarea id="txtArea" onmouseover="mouseMoved();"></textarea>
    <div id="hiddenDiv" class="hidden"></div>
</body>

有与textarea关联的onmouseover事件。

function mouseMoved() {
    var txtArea = document.getElementById("txtArea");
    var hiddenDiv = document.getElementById("hiddenDiv");
    var newHtml = "";
    var words=txtArea.value.split(" ");
    for (i = 0; i < words.length; i++) {
        newHtml += '<span>' + words[i] + '</span> ';
    }
    hiddenDiv.innerHTML=newHtml;
}

有没有办法将hiddenDiv放在同一层中textarea？

我打算做的是在div的span附加一个事件，以便当用户将鼠标移到textarea以及div上时，该事件会告诉我，鼠标指针下面的单词是什么。希望我清楚地代表我的问题。如果您想了解更多信息，我会提供信息。

谢谢和问候。

编辑：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        
    <title>Test</title>
    <script type="text/javascript" src="JSFile.js"></script>
    <style type="text/css">
        .hidden {
            position: relative;
            /*visibility: hidden;*/
            top: -50px;
            left: 5px;
            z-index: -1;
        }           
        .txtArea {
            position: relative;
        }
    </style>
</head>
<body>
    <textarea id="txtArea" class="txtArea" onmouseover="mouseMovedOnTextBox();"></textarea>
    <div id="hiddenDiv" class="hidden"></div>
    <label id="lbl"></label>
</body>

和.js：

function mouseMovedOnTextBox() {
    var txtArea = document.getElementById("txtArea");
    var hiddenDiv = document.getElementById("hiddenDiv");
    var newHtml = "";
    var words=txtArea.value.split(" ");
    for (i = 0; i < words.length; i++) {
        newHtml += '<span onmouseover="mouseMovedOnSpan(\'' + words[i] +'\');">' + words[i] + '</span> ';
    }
    hiddenDiv.innerHTML=newHtml;
} 

function mouseMovedOnSpan(word) {
    document.getElementById("lbl").innerHTML=word;
}

Answer 1

我建议您不要使用visibility：hidden但display：none，使用最后一个意味着该元素不会在页面内部使用空间，您可以轻松处理您的情况。
祝你好运

一个接一个地分层两个HTML组件

1 个答案: