hover not working on div element with textarea

Question

without using z-index I couldn't get the div values while hover that element.

<div id="main" style="width:150px;height:150px;position:absolute;background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255);"><span id="test" onmouseover="return test();">helo</span></div> 
<textarea style="width:150px;height:150px;position:relative;background:none;"></textarea>

<script>
    function test(){
    alert('hi');    
    }
</script>

how to get that test id value when hover that text ( without giving z-index to textarea) ?

Answer 1

See if that's what you're wanting to happen :

 var s_val = document.getElementById("span").innerHTML; var tArea = document.getElementById("test"); tArea.addEventListener("mouseover", function test(){ alert(s_val); }); 

 #main { width:150px; height:150px; position:absolute; background: none 0% 0% / auto repeat scroll padding-box border-box rgb(255, 255, 255); } #test { width:150px; height:150px; position:relative; background:none; } 

 <div id="main"> <span id="span">helo</span> </div> <textarea id="test"></textarea> 

Just get the value of the <span> using the innerHTML event (stored into a var for better view) and call it on the alert() .