Question

我的广场里面有一个标志。在广场上悬停时，我想要更改背景颜色以及徽标的颜色。

我有以下代码：

<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;
}

我可以在悬停时更改徽标，我可以更改广场，但我无法同时更改它们，即当鼠标接触广场时。

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

Answer 1

清洁HTML（因为img标签需要一个源，你可以为div更改它）：

<div class="pure-u-1 pure-u-md-1-3">
  <div class="project", id="project1">
   <div class="pure-img">
  </div>
 </div>

CSS：

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

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

.pure-img{
    background-image: url(http://dummyimage.com/600x400/000/fff);
    width: 80px; 
    height: 78px;


}

#project1:hover .pure-img {
  background-image: url(http://dummyimage.com/600x400/666/0011fc);
}

和小提琴 http://jsfiddle.net/h6gwwox6/1/

Answer 2

不需要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/

并排创建一个带有两个徽标版本的精灵。当您悬停时，您将更改背景颜色并移动精灵图像的位置（左，右，上，下 - 取决于您创建精灵的方式）。

sailens 对此答案的好处是您没有使用无效标记（<img>没有src属性）并且您只是单个请求图像而不是两个。哦，标记更少 - 一个<div>（可能是<a>，<span>等。

您还可以使用background代替单个背景属性来缩短.logo。为了清楚起见，我首先列出了它们。

.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/

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

2 个答案: