Question

我已经看到了一些使用指针事件的解决方案，但是它们仅适用于一个div。我想使指针事件在多个div上起作用。

简而言之，我不想禁用上层div上的mouseevent传递下层div，而是“复制”鼠标事件，以便它同时在两个div上起作用。

<!DOCTYPE html>
<!-- saved from url=(0063)file:///C:/Users/LINUX/Desktop/chartjs/another/log%20scale.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	
    <title>log scale</title>
   
    <style>
   
    .smallbox {
      display: inline-block;
      position: absolute;
      width: 200px;
      height: 200px;
      border: 1px solid blue;
      background-color: green;
    }

    .bigbox {
      display: inline-block;
      position: absolute;
      width: 300px;
      height: 300px;
      border: 1px solid blue;
   
      background-color: rgba(0,255,0, 0.1);

    }

    .smallbox:hover {
      background-color: red;
    }
    .bigbox:hover {
      background-color: rgba(0,0,255, 0.3);
    }

  </style>
  </head>
    <body>

    <div style="display: block; overflow: hidden; width: 300px; height: 300px;"> 
      <span class="smallbox">
      </span>
      <span class="bigbox">
      </span>
    </div>
   
      In css, 
     smallbox hover = background: red<br>
     bigbox hover = background: rgba(0,0,255, 0.3);<br><br>
     
     both has position absolute.<br>
     
     Bigbox div element is next to smallbox div.<br><br>
     
     Problem:<br>
     
     When i hover bigbox, it changes color<br>
     But when i do on smallbox, it doesnt change color to red.<br><br>
     
     The solution I want:<br><br>
     
     As u can see, the mouseevent is working just on the top div, is there a css/javascript solution to "copy" the mouseevent and make it work in both divs?<br><br>
     
     Please help!<br>
      
     
    
    </body>
   
   </html>

一个人在以下线程的第二答案中提到了类似的解决方案，但我无法实现它

Forwarding Mouse Events through layers/divs

在多个绝对重叠的div上复制鼠标事件

0 个答案: