blocks|key|22795|text|一种解决方案是使用第一个图像作为背景图像，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|22796|<div+id="Library"></div>|code-block|syntax|javascript|22797|#Library+{
+++background-image:+url('LibraryTransparent.png');
+++height:+70px;
+++width:+120px;
}

#Library:hover+{
+++background-image:+url('LibraryHoverTrans.png');
}|22798|如果你的悬停图像有不同的大小，你必须这样设置它们：|22799|#Library:hover+{
+++background-image:+url('LibraryHoverTrans.png');
+++width:+[IMAGE_WIDTH_IN_PIXELS]px;
+++height:+[IMAGE_HEIGHT_IN_PIXELS]px;
}|22800|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

One solution is to use also the first image as a background image like this:

<pre><code>&lt;div id="Library"&gt;&lt;/div&gt;
</code></pre>



<pre class="lang-css prettyprint-override"><code>#Library {
 background-image: url('LibraryTransparent.png');
 height: 70px;
 width: 120px;
}

#Library:hover {
 background-image: url('LibraryHoverTrans.png');
}
</code></pre>

If your hover image has a different size, you've got to set them like so:

<pre class="lang-css prettyprint-override"><code>#Library:hover {
 background-image: url('LibraryHoverTrans.png');
 width: [IMAGE_WIDTH_IN_PIXELS]px;
 height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
</code></pre>

blocks|key|22975|text|另一种选择是使用JS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|22976|<img+src='LibraryTransparent.png'+onmouseover="this.src='LibraryHoverTrans.png';"+onmouseout="this.src='LibraryTransparent.png';"+/>|code-block|syntax|javascript|22977|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Another option is to use JS:

<pre><code>&lt;img src='LibraryTransparent.png' onmouseover="this.src='LibraryHoverTrans.png';" onmouseout="this.src='LibraryTransparent.png';" /&gt;
</code></pre>

blocks|key|22839|text|使用content|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|22840|#Library+{
++++height:+70px;
++++width:+120px;
}

#Library:hover+{
++++content:+url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
++++height:+70px;
++++width:+120px;
}|code-block|syntax|javascript|22841|JSFiddle|22842|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/DRRnu/^0|2|7|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@$9|Z|A|10|1|11]]|E|$]]|$1|M|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

Use <code>content</code>:

<pre class="lang-css prettyprint-override"><code>#Library {
 height: 70px;
 width: 120px;
}

#Library:hover {
 content: url('http://www.furrytalk.com/wp-content/uploads/2010/05/2.jpg');
 height: 70px;
 width: 120px;
}
</code></pre>

<a href="http://jsfiddle.net/DRRnu/" rel="noreferrer">JSFiddle</a>

blocks|key|239518|text|之前所有答案的问题是，悬停图像没有加载页面，所以当浏览器调用它时，加载需要时间，整个过程看起来并不是很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239519|我所做的是将原始图像和悬停图像放在1个元素中，并首先隐藏悬停图像。然后在hover+in时，我显示悬停图像并隐藏旧图像，在hover+out时，我做相反的事情。|239520|HTML：|239521|<span+id="bellLogo"+onmouseover="hvr(this,+'in')"+onmouseleave="hvr(this,+'out')">
++<img+src="stylesheets/images/bell.png"+class=bell+col="g">
++<img+src="stylesheets/images/bell_hover.png"+class=bell+style="display:none"+col="b">
|code-block|syntax|javascript|239522|JavaScript/jQuery：|239523|function+hvr(dom,+action)
{
++++if+(action+==+'in')
++++{
++++++++$(dom).find("[col=g]").css("display",+"none");
++++++++$(dom).find("[col=b]").css("display",+"inline-block");
++++}

++++else
++++{
++++++++$(dom).find("[col=b]").css("display",+"none");
++++++++$(dom).find("[col=g]").css("display",+"inline-block");
++++}
}|239524|对我来说，这是最简单、最有效的方法。|239525|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|V|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

The problem with all the previous answers is that the hover image isn't loaded with the page so when the browser calls it, it takes time to load and the whole thing doesn't look really good.

What I do is that I put the original image and the hover image in 1 element and hide the hover image at first. Then at hover in I display the hover image and hide the old one, and at hover out I do the opposite.

HTML:

<pre><code>&lt;span id="bellLogo" onmouseover="hvr(this, 'in')" onmouseleave="hvr(this, 'out')"&gt;
 &lt;img src="stylesheets/images/bell.png" class=bell col="g"&gt;
 &lt;img src="stylesheets/images/bell_hover.png" class=bell style="display:none" col="b"&gt;
&lt;/span&gt;
</code></pre>

JavaScript/jQuery:

<pre><code>function hvr(dom, action)
{
 if (action == 'in')
 {
 $(dom).find("[col=g]").css("display", "none");
 $(dom).find("[col=b]").css("display", "inline-block");
 }

 else
 {
 $(dom).find("[col=b]").css("display", "none");
 $(dom).find("[col=g]").css("display", "inline-block");
 }
}
</code></pre>

This to me is the easiest and most efficient way to do it.

blocks|key|22948|text|您可以替换HTML+IMG的图像，而无需对容器div进行任何背景图像更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|22949|这是使用CSS属性box-sizing:+border-box;获得的(它使您可以非常有效地在<IMG>上放置一种悬停效果)。|offset|length|style|CODE|22950|为此，请将如下类应用于您的图像：|22951|.image-replacement+{
++display:+block;
++-moz-box-sizing:+border-box;
++box-sizing:+border-box;
++background:+url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif)+no-repeat;/*+this+image+will+be+shown+over+the+image+iSRC+*/
++width:+180px;
++height:+236px;
++padding-left:+180px;
}|code-block|syntax|javascript|22952|示例代码：http://codepen.io/chriscoyier/pen/cJEjs|22953|原文：http://css-tricks.com/replace-the-image-in-an-img-with-css/|22954|希望这能帮助你们中的一些人，他们不想放一个div来获得具有“悬停”效果的图像。|22955|在这里发布示例代码：|22956|HTML：|22957|<img+id="myImage"+src="images/photo1.png"+class="ClassBeforeImage-replacement">|22958|jQuery：|22959|$("#myImage").mouseover(function+()+{
++++$(this).attr("class",+"image-replacement");
});
$("#myImage").mouseout(function+()+{
++++$(this).attr("class",+"ClassBeforeImage-replacement");
});|22960|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/chriscoyier/pen/cJEjs|1|http://css-tricks.com/replace-the-image-in-an-img-with-css/^0|0|9|N|1B|5|0|0|0|5|13|0|0|3|1N|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1F|8|@$D|1G|E|1H|F|G]|$D|1I|E|1J|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1K|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1L|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1M|8|@]|9|@$D|1N|E|1O|1|1P]]|A|$]]|$1|Q|3|R|5|6|7|1Q|8|@]|9|@$D|1R|E|1S|1|1T]]|A|$]]|$1|S|3|T|5|6|7|1U|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|1V|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1W|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1X|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|12|3|13|5|L|7|1Z|8|@]|9|@]|A|$M|N]]|$1|14|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]|1C|$5|17|18|19|A|$1A|1D]]]]

You can replace the image of an HTML IMG without needing to make any background image changes to the container div.

This is obtained using the CSS property <code>box-sizing: border-box;</code> (It gives you a possibility to put a kind of hover effect on an <code>&lt;IMG&gt;</code> very efficiently.)

To do this, apply a class like this to your image:

<pre class="lang-css prettyprint-override"><code>.image-replacement {
 display: block;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background: url(http://akamaicovers.oreilly.com/images/9780596517748/cat.gif) no-repeat;/* this image will be shown over the image iSRC */
 width: 180px;
 height: 236px;
 padding-left: 180px;
}
</code></pre>

Sample code: <a href="http://codepen.io/chriscoyier/pen/cJEjs" rel="nofollow">http://codepen.io/chriscoyier/pen/cJEjs</a>

Original article:
<a href="http://css-tricks.com/replace-the-image-in-an-img-with-css/" rel="nofollow">http://css-tricks.com/replace-the-image-in-an-img-with-css/</a>

Hope this will help some of you guys who don't want to put a div to obtain an image having a "hover" effect.

Posting here the sample code:

HTML:

<pre><code>&lt;img id="myImage" src="images/photo1.png" class="ClassBeforeImage-replacement"&gt;
</code></pre>

jQuery:

<pre><code>$("#myImage").mouseover(function () {
 $(this).attr("class", "image-replacement");
});
$("#myImage").mouseout(function () {
 $(this).attr("class", "ClassBeforeImage-replacement");
});
</code></pre>

blocks|key|239352|text|您不能使用CSS更改图像的SRC属性(除非浏览器支持它)。您可能希望将jQuery与hover事件一起使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239353|$("#Library+").hover(
++++function+()+{
+++++++++$(this).attr("src","isHover.jpg");
++++},
++++function+()+{
++++++++$(this).attr("src","notHover.jpg");
++++}
);|code-block|syntax|javascript|239354|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can't use CSS to change image SRC attributes (unless the browser supports it).
You may want to use jQuery with the hover event.

<pre><code>$("#Library ").hover(
 function () {
 $(this).attr("src","isHover.jpg");
 },
 function () {
 $(this).attr("src","notHover.jpg");
 }
);
</code></pre>

blocks|key|239302|text|将img标记更改为div，并在CSS中为其添加背景。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|239303|entityMap^0|1|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Change the <code>img</code> tag to a div and give it a background in CSS.

blocks|key|23090|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|23091|.foo+img:last-child{display:none}
.foo:hover+img:first-child{display:none}
.foo:hover+img:last-child{display:inline-block}|code-block|syntax|javascript|23092|<body>+
++++<a+class="foo"+href="#">
++++++++<img+src="http://lojanak.com/image/9/280/280/1/0"+/>
++++++++<img+src="http://lojanak.com/image/0/280/280/1/0"+/>
++++</a>
</body>|23093|23094|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.foo img:last-child{display:none}
.foo:hover img:first-child{display:none}
.foo:hover img:last-child{display:inline-block}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt; 
 &lt;a class="foo" href="#"&gt;
 &lt;img src="http://lojanak.com/image/9/280/280/1/0" /&gt;
 &lt;img src="http://lojanak.com/image/0/280/280/1/0" /&gt;
 &lt;/a&gt;
&lt;/body&gt;</code></pre>
</div>
</div>

blocks|key|239220|text|问题是你通过'src‘属性设置了第一张图片，并在悬停时添加了一个背景图片。试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239221|在html使用中：|239222|<img+id="Library">|code-block|syntax|javascript|239223|然后在css中：|239224|#Library+{
++++height:+70px;
++++width:+120px;
++++background-image:+url('LibraryTransparent.png');
}

#Library:hover+{
++++background-image:+url('LibraryHoverTrans.png');
}|239225|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

The problem is that you set the first image through 'src' attribute and on hover added to the image a background-image.
try this:

in html use: 

<pre><code>&lt;img id="Library"&gt;
</code></pre>

then in css:

<pre><code>#Library {
 height: 70px;
 width: 120px;
 background-image: url('LibraryTransparent.png');
}

#Library:hover {
 background-image: url('LibraryHoverTrans.png');
}
</code></pre>

blocks|key|239365|text|检查此fiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|239366|我认为在您的情况下图像路径可能是错误的|239367|语法看起来是正确的|239368|background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');|code-block|syntax|javascript|239369|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/vigneshvdm/LeuQc/^0|3|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|C|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

check this <a href="http://jsfiddle.net/vigneshvdm/LeuQc/" rel="nofollow">fiddle</a>

I think the image path may be wrong in your case

the syntax looks right

<pre><code>background-image:url('http://www.bluecowcreative.ca/wp-content/uploads/2013/08/hi.jpg');
</code></pre>

blocks|key|239402|text|以你做事情的方式，这是不会发生的。您正在更改被原始图像阻挡的图像的背景图像。更改高度和宽度也不会发生。要更改图像的src属性，您需要Javascript或Javascript库，如jQuery。但是，您可以将图像更改为一个简单的div+(文本)框，并拥有一个在悬停时更改的背景图像，即使div框本身将是空的。下面是如何实现的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239403|<div+id="emptydiv"></div>

#emptydiv+{

background-image:+url("LibraryHover.png");
height:+70px;
width:+120px;|code-block|syntax|javascript|239404|}|239405|#emptydiv:hover+{

background-image:+url("LibraryHoverTrans.png");
height:+700px;
width:+1200px;

}|239406|我希望这就是您所要求的:)|239407|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In the way that you're doing things, it won't happen. You're changing the background image of the image, which is being blocked by the original image. Changing the height and width also won't happen. To change the src attribute of the image, you would need Javascript or a Javascript Library such as jQuery. You could however, change the image to a simple div (text) box, and have a background image that changes on hover, even though the div box itself will be empty. Here's how.

<pre><code>&lt;div id="emptydiv"&gt;&lt;/div&gt;

#emptydiv {

background-image: url("LibraryHover.png");
height: 70px;
width: 120px;
</code></pre>

}

<pre><code>#emptydiv:hover {

background-image: url("LibraryHoverTrans.png");
height: 700px;
width: 1200px;

}
</code></pre>

I hope this is what you're asking for :)

blocks|key|22983|text|由于每个人都使用背景图像选项来回答问题，所以他们缺少一个属性。高度和宽度将设置图像的容器大小，但不会调整图像本身的大小。背景大小需要压缩或拉伸图像以适合此容器。我使用了“最佳答案”中的例子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|22984|<div+id="Library"></div>
#Library+{
+++background-image:+url('LibraryTransparent.png');
+++background-size:+120px;
+++height:+70px;
+++width:+120px;
}

#Library:hover+{
+++background-image:+url('LibraryHoverTrans.png');
}|code-block|syntax|javascript|22985|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

With everyones answer using the background-image option they're missing one attribute. The height and width will set the container size for the image but won't resize the image itself. background-size is needed to compress or stretch the image to fit this container. I've used the example from the 'best answer'

<pre><code>&lt;div id="Library"&gt;&lt;/div&gt;
#Library {
 background-image: url('LibraryTransparent.png');
 background-size: 120px;
 height: 70px;
 width: 120px;
}

#Library:hover {
 background-image: url('LibraryHoverTrans.png');
}
</code></pre>

blocks|key|239552|text|我的jquery解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239553|function+changeOverImage(element)+{
++++++++var+url+=+$(element).prop('src'),
++++++++++++url_over+=+$(element).data('change-over')
++++++++;

++++++++$(element)
++++++++++++.prop('src',+url_over)
++++++++++++.data('change-over',+url)
++++++++;
++++}
++++$(document).delegate('img[data-change-over]',+'mouseover',+function+()+{
++++++++changeOverImage(this);
++++});
++++$(document).delegate('img[data-change-over]',+'mouseout',+function+()+{
++++++++changeOverImage(this);
++++});|code-block|syntax|javascript|239554|和html|239555|<img+src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%253Cimg%2520original%2520/%253E&w=342&h=300"+data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%253Cimg%2520over%2520/%253E&w=342&h=300"+/>|239556|演示：JSFiddle+demo|offset|length|239557|问候|239558|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/iBet7o/39gecf8L/^0|0|0|0|0|3|D|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|10|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|12|8|@]|9|@$M|13|N|14|1|15]]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

My jquery solution.

<pre><code>function changeOverImage(element) {
 var url = $(element).prop('src'),
 url_over = $(element).data('change-over')
 ;

 $(element)
 .prop('src', url_over)
 .data('change-over', url)
 ;
 }
 $(document).delegate('img[data-change-over]', 'mouseover', function () {
 changeOverImage(this);
 });
 $(document).delegate('img[data-change-over]', 'mouseout', function () {
 changeOverImage(this);
 });
</code></pre>

and html

<pre><code>&lt;img src="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=%3Cimg%20original%20/%3E&amp;w=342&amp;h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=%3Cimg%20over%20/%3E&amp;w=342&amp;h=300" /&gt;
</code></pre>

Demo: <a href="https://jsfiddle.net/iBet7o/39gecf8L/" rel="nofollow">JSFiddle demo</a>

Regards

blocks|key|23079|text|现场示例：JSFiddle|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|23080|公认的答案有一些问题。图像没有在那里调整大小。使用background-size属性调整图像大小。|23081|HTML：|23082|<div+id="image"></div>|code-block|syntax|javascript|23083|CSS：|23084|#image+{
+++background-image:+url('image1');
+++background-size:+300px+390px;
+++width:+300px;
+++height:390px;
}

#image:hover{
++background:+url("image2");
++background-size:+300px+390px;
}|23085|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/rafee/sbmec1e5/^0|5|8|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

Live Example: <a href="https://jsfiddle.net/rafee/sbmec1e5/" rel="nofollow">JSFiddle</a>

The Accepted answer has some problem. The image wasn't resized there. Use background-size property for resizing the image.

HTML:

<pre><code>&lt;div id="image"&gt;&lt;/div&gt;
</code></pre>

CSS:

<pre><code>#image {
 background-image: url('image1');
 background-size: 300px 390px;
 width: 300px;
 height:390px;
}

#image:hover{
 background: url("image2");
 background-size: 300px 390px;
}
</code></pre>

blocks|key|239694|text|在hover.This+works中使用"content:;“。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239695|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Use &quot;content:;&quot; at the hover.This works.

blocks|key|239543|text|只需使用Photoshop创建两个相同的图像，第一个是你希望它看起来是什么样子，第二个是当它悬停在上面的时候你想要它是什么样子。我将图像包装在一个<a>标记中，因为我假设它就是您想要的。对于这个例子，我正在做一个facebook图标，它是不饱和的，但当鼠标悬停在它上面时，它将显示facebook的蓝色。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|239544|<a+href="www.facebook.com"><img+src="place+of+1st+image"+onmouseover="this.src='place+of+2nd+image'"+onmouseout="this.src='place+of+1st+image'"></a>|code-block|syntax|javascript|239545|entityMap^0|21|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

Just use Photoshop and create two of the same image, the 1st one being how you want it to look, the 2nd being how you want it to look when it's hovered over. I'm wrapping the image in an <code>&lt;a&gt;</code> tag, because I'm assuming that it's what you want. For this example I'm doing a facebook icon which is desaturated, but when hovered over it will show the blue color of facebook.

<pre><code>&lt;a href="www.facebook.com"&gt;&lt;img src="place of 1st image" onmouseover="this.src='place of 2nd image'" onmouseout="this.src='place of 1st image'"&gt;&lt;/a&gt;
</code></pre>

blocks|key|239626|text|这是一个简单的技巧。只需复制并粘贴即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239627|<!DOCTYPE+html>
++++<html+lang="en">
++++<head>
++++<title>Change+Image+on+Hover+in+CSS</title>
++++<style+type="text/css">
++++++++.card+{
++++++++++++width:+130px;
++++++++++++height:+195px;
++++++++++++background:+url("../images/card-back.jpg")+no-repeat;
++++++++++++margin:+50px;
++++++++}
++++++++.card:hover+{
++++++++++++background:+url("../images/card-front.jpg")+no-repeat;
++++++++}
++++</style>
++++</head>
++++<body>
++++++++<div+class="card"></div>
++++</body>
++++</html>+++++++|code-block|syntax|javascript|239628|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Here is the simple trick. Just copy and paste it.

<pre><code>&lt;!DOCTYPE html&gt;
 &lt;html lang="en"&gt;
 &lt;head&gt;
 &lt;title&gt;Change Image on Hover in CSS&lt;/title&gt;
 &lt;style type="text/css"&gt;
 .card {
 width: 130px;
 height: 195px;
 background: url("../images/card-back.jpg") no-repeat;
 margin: 50px;
 }
 .card:hover {
 background: url("../images/card-front.jpg") no-repeat;
 }
 &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div class="card"&gt;&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt; 
</code></pre>

blocks|key|239653|text|我也遇到过类似的问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|239654|我的按钮定义如下：|239655|<button++id="myButton"+class="myButtonClass"></button>|code-block|syntax|javascript|239656|我有这样的背景样式：|239657|#myButton{+background-image:url(img/picture.jpg)}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}|239658|当我将其切换为：|239659|#myButton{}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}|239660|鼠标悬停功能运行得很好。|239661|(不涉及其他属性，如图像或容器的大小和位置，只涉及背景图像的变化)|239662|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

I had a similar problem.

With my button defined like:

<pre><code>&lt;button id="myButton" class="myButtonClass"&gt;&lt;/button&gt;
</code></pre>

I had the background styling like this:

<pre><code>#myButton{ background-image:url(img/picture.jpg)}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}
</code></pre>

When I switched it to:

<pre><code>#myButton{}

.myButtonClass{background-image:url(img/picture.jpg)}

.myButtonClass:hover{background-image:url(img/picture_hover.jpg)}
</code></pre>

The hover over feature worked just fine. 

(not addressing other attributes like size and position of image or of container, just the background image changing)

I have this problem where I have set an image to display another image when the mouse hovers over, however the first image still appears and the new one doesn't change height and width and overlaps the other one. I'm still pretty new to HTML/CSS so I may have missed something simple. Here is the code:

<pre><code>&lt;img src="LibraryTransparent.png" id="Library"&gt;
</code></pre>

<pre class="lang-css prettyprint-override"><code>#Library {
 height: 70px;
 width: 120px;
}

#Library:hover {
 background-image: url('LibraryHoverTrans.png');
 height: 70px;
 width: 120px;
}
</code></pre>

Changing image on hover with CSS/HTML

容器

jQuery

我有这个问题，我设置了一个图像，当鼠标悬停在上面时显示另一个图像，但是第一个图像仍然出现，新的图像没有改变高度和宽度，并且与另一个图像重叠。我仍然是HTML/CSS的新手，所以我可能错过了一些简单的东西。代码如下：<img src="LibraryTransparent.png" id="Library">#Library { height: 70px; width: 120px;}#

问使用CSS/HTML更改悬停时的图像
EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS/HTML更改悬停时的图像EN

回答 18

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS/HTML更改悬停时的图像
EN