Html 将链接悬停在非矩形div上

我有一个带有悬停属性和url锚定的非矩形div，形状如下：

我想让div可以点击到一个url链接，同时改变它的背景颜色，当鼠标悬停在边界范围内

我目前拥有的结果是在右下角空白处的边框外有一个可点击的div。有没有办法“裁剪”出空间

HTML:

---

不，您不能使用当前HTML代码，因为您看不到的是周围的

a

元素形状是矩形的，这是您悬停在上面的，而不是两个内部

div

，要在屏幕上看到它，请将此添加到CSS中：

a { border:2px red solid; }

---

您将看到这个结果，它将显示外部

的区域，将外部

div更改为
显示：内联，并将第二个
div
#ex
更改为
显示：内联块


#ax{
宽度：500px；
高度：50px；
背景：蓝色；
边框：2件纯黑；
}
#围{
显示：内联；
}
#前{
宽度：100px；
高度：27px；
背景：蓝色；
左边框：2倍纯黑；
底部边框：2件纯黑；
右边框：2倍纯黑；
页边顶部：-2px；
显示：内联块；
}
a:悬停，a:悬停{
背景：黄色；
}
虽然这很巧妙地解决了底部的
div
问题，但上部的
div
仍然存在相同的问题，即使您实际上没有在蓝色上方，它也会像悬停一样，因为它像块一样，将其设置为
inline
或
inline block
将无法修复它，因为底部的'div将按照此图像中显示的OPA中的需要排列在它旁边，而不是在它下面，即使红色区域位于形状之外，如果将鼠标悬停在其上，也会触发悬停效果
#ax {
  width: 500px;
  height: 50px;
  background: blue;
  border: 2px solid black;
}

#ex {
  width: 100px;
  height: 27px;
  background: blue;
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  border-right: 2px solid black;
  margin-top: -2px
}

#wai:hover .a{
  background:yellow;
}

a { border:2px red solid; }