更改悬停时的背景颜色和图片 [英] Change background color and image on hover

问题描述

我有一个内有徽标的正方形。悬停在广场上，我想要的背景颜色以及标志的颜色更改。

I have a square with a logo inside. On hover in the square, I want the background color to change as well as the color of the 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;
}

我可以让标志在悬停时更改，更改，但是我不能让他们同时更改，即当鼠标触及正方形。

I can get the logo to change on hover and I can get the square to change, but I can't get them to both change at the same time, i.e. when the mouse touches the square.

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

I'm assuming this needs javascript, which I do not know. Any tips/help is greatly appreciated.

推荐答案

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

No JavaScript required, just CSS. No need for an <img> either.

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

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

Create a sprite with both versions of the logo side-by-side. When you hover you will change the background color and shift the position of the sprite image (left, right, up, down - depends on how you created your sprite).

这个回答的好处是你没有使用无效标记（< img> 没有 src 属性），你只是对一个图像而不是两个请求。哦，更少的标记 - 单个< div> （可以是< a> ，<$

The benefits to this answer over sailens is that you're not using invalid markup (<img> without a src attribute) and you're only making a single request for an image instead of two. Oh, and less markup - a single <div> (which could be an <a>, <span> etc).

您还可以缩短 .logo c>使用背景，而不是单个背景属性。我首先列出了它们的清晰度。

You could also shorten .logo by using background instead of individual background properties. I listed them out at first for clarity.

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

这篇关于更改悬停时的背景颜色和图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！