将链接悬停在非矩形 div 上

Question

我有一个非矩形 div，它同时具有悬停属性和 url 锚点，形状如下：

当鼠标悬停在边框范围内时，我希望 div 可点击到 url 链接，同时更改其背景颜色。

我目前拥有的结果是在右下角空白区域的边界之外产生一个可点击的 div。有没有办法“裁剪”出空间？

HTML：

<a href="http://www.reddit.com" target="_blank" style="display:block">
    <div id="wai">
        <div id="ax" class="a"> </div>
        <div id="ex" class="a"> </div>
    </div>
</a>

CSS：

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

demo

Answer 1

不，您不能使用当前的 HTML 代码，因为您看不到的是周围的 a 元素形状是矩形，这是您悬停在两个内部 div 上的东西，而不是看到它在屏幕上将此添加到您的 CSS：

a { border:2px red solid; }

你会看到这个结果JSFiddle 1，它将显示外部<a>的面积

a {
  border: 2px red solid;
}
#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 href="http://www.reddit.com" target="_blank" style="display:block">
  <div id="wai">
    <div id="ax" class="a"></div>
    <div id="ex" class="a"></div>

  </div>
</a>

要解决此问题，请将内部 div 更改为 <a> 并使用 javascript 更改它们的颜色，只要您 mouseover 其中之一，并将它们设置回原始颜色当mouseout 与此JSFiddle 2 一样时

var links = $('#wai a');
links.on('mouseover', function() {
  links.css({
    'background-color': 'yellow'
  });
}).on('mouseout', function() {
  links.css({
    'background-color': 'blue'
  });
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="wai">
  <a id="ax" href="http://www.reddit.com" target="_blank" style="display:block"></a>
  <a id="ex" href="http://www.reddit.com" target="_blank" style="display:block"></a>
</div>

Answer 2

将外部div #wai 更改为display:inline;，并将第二个div #ex 更改为display:inline-block;。

#ax {
width: 500px;
height: 50px;
background: blue;
border: 2px solid black;
}
#wai{
display: inline;
}
#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;
    display: inline-block;
}

a:hover #ax, a:hover #ex{
  background:yellow;
}

<a href="http://www.reddit.com" target="_blank">
<div id="wai">
<div id="ax" class="a"> </div>
<div id="ex" class="a"> </div>
 
  </div></a>