javascript - 具有悬停效果的重叠图像

标签 javascript html css svg css-shapes

我正在尝试实现一种效果,其中 3 个向上箭头图形相互挤压,当您将鼠标悬停在一个图形上时,箭头会变大,点击后您会转到一个新页面。

我遇到的问题是当箭头重叠时,图像的透明部分会响应悬停。

构建它的最佳方法是什么?我在考虑 svg,但图形太复杂了。

Here is a screenshot.

这些箭头中的每一个都是一个单独的图像,并且在悬停时它们会放大。但是重叠部分在图形之间移动时会导致意外行为。

这是我目前拥有的链接。 http://show.issa.com.php56-33.ord1-1.websitetestlink.com/

最佳答案

您可以“伪造”它并创建三个透明区域 - 如果您需要精确的箭头形状,甚至可以使用 SVG - 在所有透明区域之上并使用它们进行交互。使用纯 javascript 或 Jquery 很容易实现这一点。

关于javascript - 具有悬停效果的重叠图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36583777/

相关文章:

html - 如何将参数传递给 css 类

html - 移动导航不是静态的

javascript - 如何将 EL 变量传递给 javascript

javascript - 如何使用javascript在html5的canvas中绘制图片

javascript - 使用 jQuery 设置替代行的颜色?

javascript - 如何在 Network - Chaps 链接库中添加文本输入节点

javascript - 在弹出窗口中显示带有 Ajax 数据源的 jQuery DataTables

javascript - 如何垂直对齐 block

JavaScript - 在拼接数组中的项目然后将该数组重新呈现到我的页面时遇到问题

html - 我可以激活一个弹出式 <div> 对另一个 <div> 做些什么吗?