gpt4 book ai didi

javascript - SVG 中虚线的悬停事件

转载 作者:行者123 更新时间:2023-11-30 11:24:25 31 4
gpt4 key购买 nike

带有使用 stroke-dasharray 的线条(或路径)的 SVG 似乎仅在用户悬停在虚线的实心部分上时触发 CSS 和 JS 悬停事件:https://codepen.io/anon/pen/YeXoZy

有没有一种简单的方法可以在悬停线条的实体部分或不可见部分时同时触发 JS 和 CSS 事件?

我目前的计划是沿着相同的路径绘制第二条不可见的线,并用它来检测鼠标事件。 https://codepen.io/anon/pen/BYNgRR这看起来很笨拙,我希望我能找到一种更简洁的方法。

最佳答案

如果没有第二个“检测器”行,我不确定如何做到这一点,但如果没有 JS,至少可以采用不那么繁重的方法。

切换线条的顺序,然后您可以像往常一样对虚线使用悬停选择器,然后在检测器线条的选择器中使用 + 来更改紧随其后的线条的属性它:

https://codepen.io/RyanGoree/pen/LQVKBV

关于javascript - SVG 中虚线的悬停事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48555282/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com