css - 悬停发生在元素宽度之外

Question

当我将鼠标悬停在超链接上时，它超出了链接文本。

jsFiddle 链接是:jsFiddle

似乎它占用了 <div> 的宽度因此出现在整个 <div> 中元素。

这是 HTML(使用基础):

<div class="container row">
    <a href="#">
        <div id="logo" class="large-3 columns">
            <span>My Bank ,too Big</span>
        </div>
    </a>
</div>

如何解决这个问题？我无法更改此处应用的基础类(class)。 发生这种情况是由于 <span>元素？

我尝试减少<span>宽度，但未观察到行为变化。

Answer 1

问题是因为 a 标签内有 div 。默认情况下，所有 div 标记都是 block 元素，因此将占用整个可用宽度，而 a 标记默认情况下是内联的，并且只会占用所需的宽度。如果您将 a 移动到 div 标记内(如下面的代码片段所示)，该问题将会得到修复。

.row.container {
  max-width: 1020px;
  margin: 0 auto;
  padding: 0 30px;
}
.row.container {
  position: relative;
}
.row.container:after,
.row.container:before {
  content: " ";
  display: table;
}
.large-3 {
  width: 25%;
}
#logo {
  margin: 46px 0 0;
  padding: 0 0 46px;
}

<div class="container row">
  <div id="logo" class="large-3 columns">
    <a href="#">
      <span>My Bank ,too Big</span>
    </a>
  </div>
</div>