javascript - 悬停时更改背景颜色和图像

Question

我有一个正方形，里面有一个标志。将鼠标悬停在广场上时，我希望改变背景颜色以及 Logo 的颜色。

我有以下代码:

<div class="pure-u-1 pure-u-md-1-3">
 <div class="project", id="project1">
  <a href="#" ><img class="pure-img" src="/media/logo.png" onmouseover="this.src='/media/logo2.png'" onmouseout="this.src='/media/logo.png'" width="80px" height="78px" alt="logo"></a>
 </div>
</div>

.project {
  background-color: #f5f4f4;
  margin: 0 0.5em 2em;
  padding: 4em 4em;
}

#project1:hover {
  background-color: red;
}

我可以让 Logo 在悬停时发生变化，我可以让正方形发生变化，但我无法让它们同时发生变化，即当鼠标触摸正方形时。

我假设这需要 javascript，但我不知道。非常感谢任何提示/帮助。

Answer 1

不需要 JavaScript，只需 CSS。不需要 <img>要么。

<div class="logo">Brand Name</div>

.logo {
    width: 80px;
    height: 78px;
    text-indent: -9999em;
    background-image: url('http://s17.postimg.org/7hltqe5e3/sprite.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-color: blue;
}
.logo:hover {
    background-color: red;
    background-position: -80px 0;
}

http://jsfiddle.net/12u7ma2q/

创建一个并排显示两个版本 Logo 的 Sprite 。当您悬停时，您将更改背景颜色并移动 sprite 图像的位置(左、右、上、下 - 取决于您创建 sprite 的方式)。

---

这个答案相对于 sailens 的好处是您没有使用无效标记(<img> 没有 src 属性)，并且您只对图像发出单个请求两个。哦，还有更少的标记 - 单个 <div> (可以是 <a> 、 <span> 等)。

您也可以缩短 .logo通过使用 background而不是单独的背景属性。为了清楚起见，我首先将它们列出来。

.logo {
    width: 80px;
    height: 78px;
    text-indent: -9999em;
    background: blue url('http://s17.postimg.org/7hltqe5e3/sprite.png') no-repeat 0 0;
} 

http://jsfiddle.net/12u7ma2q/1/