Question

这段代码中的所有内容都可以正常工作，直到我将绝对元素放在顶部为止，然后onmouseover根本不起作用。我尝试使用CSS :hover，并且做同样的事情。

<html>
        <div class="stylewrap">
          <div class="style">
            <h3 class="stylesub"><span id="letterF" onmouseover="change1()">F</span></h3>
          </div>
        </div> 
 </html>
        
 <style>
     .stylewrap {
        position: absolute;
        top: 0;
     } 
     .style {
        position: relative;
        color: blue;
     }
 </style>
            
            
 <script>
       function change1(){
          document.getElementById('letterF').style.color="red";
       }
 </script>

Answer 1

您不需要任何可以正常使用CSS的onmouseover事件

.stylewrap{
   position: absolute;
   top: 0;
   } 
   .style{
   position: relative;
   color: blue;
       }
       
.AbsoluteHover:hover{
  color:red;
}

<div class="stylewrap">
   <div class="style">
      <h3 class="stylesub"><span id="letterF" class="AbsoluteHover">Test Hover</span></h3>
   </div>
</div>

onmouseover无法用于绝对位置

1 个答案: