0

To my knowledge border radius should stop mouse events from occurring on the border that was removed.

I have a circular svg/div that still fires actions and :hover events outside of the element. This also occurs for an onClick event of the container in the main project.

Overflow:hidden gives me the wanted result, but it doesn't feel like it solves the issue. It also hides a box-shadow that I want.

I mainly just want to know why this is occurring and a solution to the issue, rather than a workaround.

https://jsfiddle.net/30m8dj5c/1/

svg {
      background-color:blue;
    /* position: relative; */
    /* bottom: 25px; */
    border-radius: 1000px;
    height: 100%;
    width: auto;
    /* box-shadow: ; */
    
}
philip ryan
  • 11
  • 3
  • This is a known issue affecting Chrome (and all the webkit browsers), you can read more about it [on this other question](https://stackoverflow.com/questions/6144398/rounded-corners-fail-to-cut-off-content-in-webkit-browsers-if-positionrelative). This question is basically a duplicate of that one. A possible solution for the shadow would be adding the `overflow:hidden` and the `box-shadow` to the div containing the SVG. – Alvaro Montoro Dec 20 '20 at 05:52

1 Answers1

0

I change some hover effects.

body {
  background-color: lightblue;
}
.carosel-caret-container {
    z-index: 1;
    position: absolute;
    transform: translateY(0);
    height: 50%;
    border-radius: 100%;
}
svg {
    background-color:blue;
    border-radius: 1000px;
    border: none;
    height: 100%;
    width: auto;
}
.circle, .caret {
    transition: all .1s ease-in-out;
    cursor: pointer;
}
.circle {
    fill: black;
    fill-opacity: 0.75
}

.caret {
    fill: white;
    fill-opacity: 1;
}
svg .circle:hover {
    fill: white;
    fill-opacity: 0.8;
}

svg .caret:hover {
    fill: black;
    fill-opacity: 0.85;
}
svg:hover{
  box-shadow: 0 0 12px -4px rgba(0, 0, 0, 0.6);
}
Андрей
  • 46
  • 6
  • This does do what I want, and I can pass the onclick func I need via props to the circle. But It doesn't solve the question where I don't know why the border that is removed with border radius still is part of the svg. The background color is even cut off, so it doesn't make sense. Thank you for your workaround, though! – philip ryan Dec 19 '20 at 21:39