问题描述
我有一个内有徽标的正方形。悬停在广场上,我想要的背景颜色以及标志的颜色更改。
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;
}
创建一个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;
}
这篇关于更改悬停时的背景颜色和图片的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!