將兩個 HTML 組件層疊在一起

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

我建議您不要使用 visibiliy:hidden 而是 display:none，使用最后一個意味着該元素不會使用頁面內的空間，您可以輕松處理您的情況。
祝你好運

將兩個 HTML 組件層疊在一起

問題描述

1 個解決方案

解決方案1
0 2011-07-23 11:14:34

將兩個 HTML 組件層疊在一起

問題描述

1 個解決方案

解決方案1 0 2011-07-23 11:14:34

解決方案1
0 2011-07-23 11:14:34