html - 将链接悬停在非矩形 div 上

Question

我有一个具有悬停属性和 url anchor 的非矩形 div，形状如下:

当鼠标悬停在边框范围内时，我希望 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>