html - 鼠标悬停在被标签包围的 div 按钮上，为什么？

Question

我在一些文本下方有一个 div 按钮，并为其提供了以下 css:

<div id="text">
    <h1>Lorem ipsum <b>dolor</b></h1>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
    <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni.</p>
    <a href="blog">
        <div id="blog_button">Blog</div>
    </a>
</div>

div#blog_button {
width:90px;
height:30px;
background-color:#E31F2D;
border-radius:2px;
text-align:center;
vertical-align:middle;
line-height:30px;
margin-top:20px;

当将鼠标悬停在 div 上时，默认鼠标会更改为指针经过按钮的右手边缘沿着其容器 div 的边缘，而不是刚好在按钮上方。我怎样才能阻止这个？我只想在按钮上使用它。

Answer 1

因为 div 是 block 级元素， block 级元素在不设置宽度的情况下尽可能多地占据水平空间。您可以通过将 display: inline-block; 属性添加到 div#blog_button 来解决这个问题，如下所示:

JSFiddle - DEMO

div#blog_button {
    display: inline-block; /* add this */
    width:90px;
    height:30px;
    background-color:#E31F2D;
    border-radius:2px;
    text-align:center;
    vertical-align:middle;
    line-height:30px;
    margin-top:20px;
}