html - 为什么是:hover acting on the colored bar and the logo?

Question

我只希望它在 Logo 悬停时起作用，而不是在彩色条上起作用。我敢肯定这是一个非常简单的原因，我就是想不通。

这是我的代码的 JSFiddle:http://jsfiddle.net/3PgRv/

<header>
    <a href="index.html"><h1 id="logo">Dogeify</h1></a>
</header> 

header {
  background-color: #2B2B2B;
  height: 35px;
  width: 100%;
  opacity: .9;
  margin-bottom: 0px;
}

#logo {
  margin: 0;
  font-size: 1.7em;
  color: #fff;
  margin-left: 10px;
  text-decoration: none;

}

#logo:hover {
  margin: 0;
  font-size: 1.4em;
  opacity: .9;
  font-family:"Comic Sans","Comic Sans MS","Arial";
  color: #7ab800;
  margin-left: 10px;
  text-decoration: none;
}

Answer 1

这是因为 H1 元素的宽度一直穿过容器。设置一个特定的宽度，然后只有那个区域会触发。

添加到 Logo :

#logo{
  width:100px;
}

---

编辑根据 Hashem 下面的评论，尝试将元素设置为 display: inline-block 这更灵活。