Clever Geek Handbook

Hover event on hidden part of div

I have the following html example with css. My question is that when I move my mouse over the top cones of the parent html element the hover role becomes active. But it doesn't have to be, because it is a hidden part of the parent. It works correctly in firefox, but not in chrome, opera, that is, or in edge.

Any suggestions?

Is this a browser related bug or is it working as intended?

If I remove the position properties from the css then it works correctly but is not an option.

.perent{
  top: 0px;
  right: 0px;
  width: 500px;
  height: 500px;
  background-color:red;
  border-radius:50%;
  overflow:hidden;
  position:relative;
}

.child{
  width: 1000px;
  height: 200px;
  background-color:blue;
  position:absolute;
}

.child:HOVER{
  background-color:black;
}
      

        
        
        
      

    
<div class="perent">
    <div class="child">
    </div>
</div>
Run codeHide result


+3


source to share


2 answers


For a fully circular cut, use this:

Add this:



.perent {
    -webkit-clip-path: circle(50.0% at 50% 50%);
    clip-path: circle(50.0% at 50% 50%);
}
+1


source


Although I'm not sure if this is a browser bug or not, but I can suggest using svg



body {
  margin: 0;
}

svg {
  height: 100vh;
}

.child:hover {
  fill: black;
}
      

        
        
        
      

    
<svg viewbox="0 0 100 100">
  <defs>
      <clipPath id="clipPath">
        <circle r="50" cx="50" cy="50"/>
      </clipPath>
  </defs>
  <rect class="child" x="0" y="0" width="100" height="40" fill= "blue" clip-path="url(#clipPath)"/>
  <rect x="0" y="40" width="100" height="60" fill="red" clip-path="url(#clipPath)"/>
</svg>
Run codeHide result


+1


source






More articles:


All Articles