SVG的透明部分不允许div在后面触发其悬停。
SVG的透明部分不允许div在后面触发其悬停。
提问于 2022-03-02 14:40:35
我正在寻找一个解决方案，以忽略我的svg图像中不可见的部分，因为它正在防止它后面的div的悬停触发器。
.upNextCard{
/* Rectangle 68 */
position: absolute;
width: 214.29px;
height: 255.69px;
margin-left:300px;
margin-top:190px;
background-color:#E0B21C;
transform: rotate(-12.08deg);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
transition: 0.5s;
}
.upNextCard:hover {
margin-top: -2px;
}我的小猪看起来是这样的：
<svg style="float:right; height="647" viewBox="0 0 705 447" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M172.946 231.127C108.638 224.493 30.8536 239.697 0 248.128L109.684 501.942L794.936 205.814L706.277 0.651297C699.086 3.75868 677.418 14.5387 648.27 32.7994C619.123 51.0602 554.376 116.769 525.646 147.341C495.115 175.423 418.745 232.973 357.52 238.515C280.989 245.442 253.331 239.42 172.946 231.127Z" fill="#E6E6E6"/>
</svg>
<div id="upNextBanner">
</div>
<div class="upNextCard">
<img src="https://studio.uxpincdn.com/studio/wp-content/uploads/2021/06/Tips-for-Designers-Interested-in-Advanced-UX-UI.png">
</div>
<div id="returnToBlog">
</div>
</footer>
<footer>
<svg height="450" viewBox="0 0 713 276" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path d="M158.295 52.9042C104.35 21.3613 30.288 4.49186 0 0V276H714V52.9042C706.508 52.9042 683.393 54.2018 650.873 59.3924C618.354 64.583 536.576 99.1537 499.752 115.79C462.291 129.432 373.403 151.925 317.546 132.759C247.724 108.803 225.725 92.3327 158.295 52.9042Z" fill="#F4F4F4"></path>
</svg>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-03-02 15:00:27
这是一个快速的答案，因为我没有一个真正的例子，但您是否尝试过将pointer-events: none设置为您不想被触摸的路径？或者整个SVG，以便手动选择可以触摸的元素。如下所示：
svg {
pointer-events: none;
}
svg * {
pointer-events: visible;
}我假设您希望SVG的子级是可点击的，但如果不这样做，只需将pointer-events: none从想要触摸的孩子中排除，只需在其中指定pointer-events: visible即可。
它没有被指定为pointer-events: visible到父SVG中的任何内容都将继承此属性。因此，您必须在您希望可触摸的元素上指定pointer-events: visible。
Stack Overflow用户
发布于 2022-10-18 18:11:59
另一种类似的方法是直接设置svg路径的指针事件。
在我的例子中，我想要一个奇怪形状的svg路径的内部触发悬停事件，而不是周围的矩形包围框。设置pointer-events: fill为我解决了这个问题，如下所示：
.svg-path {
cursor: pointer;
pointer-events: fill; /* or bounding-box, or stroke, etc */
}有关这些选项的更多信息可以在这里找到：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71324538
复制相关文章
相似问题
腾讯云开发者
