悬停/鼠标动作在具有边界半径的 SVG 的截止边界上触发 [重复]

Question

据我所知，边框半径应该会阻止鼠标事件发生在被移除的边框上。

我有一个循环的 svg/div，它仍然在元素之外触发动作和 :hover 事件。主项目中容器的 onClick 事件也会发生这种情况。

Overflow:hidden 给了我想要的结果，但感觉它并不能解决问题。它还隐藏了我想要的盒子阴影。

我主要只是想知道为什么会发生这种情况以及问题的解决方案，而不是解决方法。

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

svg {
      background-color:blue;
    /* position: relative; */
    /* bottom: 25px; */
    border-radius: 1000px;
    height: 100%;
    width: auto;
    /* box-shadow: ; */
    
}

Answer 1

我更改了一些hover 效果。

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);
}