将链接悬停在非矩形div

Question

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

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

我目前所拥有的结果是在右下方空白区域的边框外面有一个可点击的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其中之一的颜色，并设置如JSFiddle 2

中那样mouseout时，它们会回到原来的颜色

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>