blocks|key|182958|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|182959|同意AshisKumar的回答，|offset|length|style|BOLD|182960|有一种方法可以通过使用jQuery功能在鼠标悬停时更改图像url，如下所示：|182961|$(function()+{
++$("img")
++++.mouseover(function()+{+
++++++++var+src+=+$(this).attr("src").match(/[%5E\.]%2B/)+%2B+"over.gif";
++++++++$(this).attr("src",+url1);+//URL+@the+time+of+mouse+over+on+image
++++})
++++.mouseout(function()+{
++++++++var+src+=+$(this).attr("src").replace("over",+"");
++++++++$(this).attr("src",+url2);+//default+URL
++++});
+});|code-block|syntax|javascript|182962|entityMap^0|0|0|G|0|0|12|0|0^^$0|@$1|2|3|-4|4|5|6|P|7|@]|8|@]|9|$]]|$1|A|3|B|4|5|6|Q|7|@$C|R|D|S|E|F]]|8|@]|9|$]]|$1|G|3|H|4|5|6|T|7|@$C|U|D|V|E|F]]|8|@]|9|$]]|$1|I|3|J|4|K|6|W|7|@]|8|@]|9|$L|M]]|$1|N|3|-4|4|5|6|X|7|@]|8|@]|9|$]]]|O|$]]

<p><a href="http://jsfiddle.net/kKLKC/28/" rel="nofollow noreferrer"><strong>Fiddle</strong></a></p>

<p><strong>Agree with AshisKumar's answer, <br>there is a way to change image url on mouse over by using jQuery functionality as below:</strong></p>

<pre><code>$(function() {
  $("img")
    .mouseover(function() { 
        var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
        $(this).attr("src", url1); //URL @the time of mouse over on image
    })
    .mouseout(function() {
        var src = $(this).attr("src").replace("over", "");
        $(this).attr("src", url2); //default URL
    });
 });
</code></pre>


blocks|key|3004724|text|由于您不能使用CSS更改src：如果您可以选择jQuery，请选中此小提琴。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|3004725|Demo|3004726|$('#aks').hover(
++++function(){
++++++$(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
++++},
++++function(){
++++++$(this).attr('src','http://dummyimage.com/100x100/000/fff')
++++}
)|code-block|syntax|javascript|3004727|它基本上使用的是.hover()方法...它需要两个函数才能使其工作。当您进入悬停和退出悬停时。|3004728|我们使用.attr+(+attribute的缩写)来更改src属性。|3004729|值得注意的是，您需要像在小提琴中一样包含jQuery库才能使其工作。|3004730|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/sulfureous/9Q4Qe/^0|C|3|0|0|4|0|0|0|8|8|0|4|5|S|3|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1B|8|@$9|1C|A|1D|B|C]|$9|1E|A|1F|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1G|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>Since you can't change the <code>src</code> with CSS: If jQuery is an option for you, check this fiddle.</p>

<h2><a href="http://jsfiddle.net/sulfureous/9Q4Qe/" rel="nofollow">Demo</a></h2>

<pre><code>$('#aks').hover(
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
    },
    function(){
      $(this).attr('src','http://dummyimage.com/100x100/000/fff')
    }
)
</code></pre>

<p>It's basically using the <code>.hover()</code> method... it takes two functions to make it work. When you enter the hover and when you exit it.</p>

<p>We are using the <code>.attr</code> (short for attribute) to change the <code>src</code> attribute.</p>

<p>It's worth to note that you need the jQuery library included like in the fiddle to make this work.</p>


blocks|key|3004757|text|不能使用CSS更改img标记的src属性。可以使用Javascript+onmouseover()事件处理程序。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|BOLD|entityRanges|data|3004758|HTML：|3004759|<img+id="my-img"+src="http://dummyimage.com/100x100/000/fff"+onmouseover='hover()'/>|code-block|syntax|javascript|3004760|Javascript:|3004761|function+hover()+{
++document.getElementById("my-img").src+=+"http://dummyimage.com/100x100/eb00eb/fff";
}|3004762|entityMap^0|4|3|9|3|F|3|10|D|P|A|0|0|0|0|B|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|D]]|E|@]|F|$]]|$1|G|3|H|5|6|7|14|8|@]|E|@]|F|$]]|$1|I|3|J|5|K|7|15|8|@]|E|@]|F|$L|M]]|$1|N|3|O|5|6|7|16|8|@$9|17|A|18|B|D]]|E|@]|F|$]]|$1|P|3|Q|5|K|7|19|8|@]|E|@]|F|$L|M]]|$1|R|3|-4|5|6|7|1A|8|@]|E|@]|F|$]]]|S|$]]

<p>You can't change <code>img</code> tag's <code>src</code> attribute using <code>CSS</code>.  Possible using <strong>Javascript</strong> <code>onmouseover()</code> event handler.</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover='hover()'/&gt;
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code>function hover() {
  document.getElementById("my-img").src = "http://dummyimage.com/100x100/eb00eb/fff";
}
</code></pre>


blocks|key|2792463|text|您不能使用css更改img+src。不过，您可以使用以下纯css解决方案。HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2792464|<div+id="asks"></div>|code-block|syntax|javascript|2792465|CSS：|2792466|#asks+{
++width:+100px;
++height:+100px;
++background-image:+url('http://dummyimage.com/100x100/0000/fff');
}

#asks:hover+{
++background-image:+url('http://dummyimage.com/100x100/eb00eb/fff');
}|2792467|或者，如果您不想使用带有背景图像的div，您可以使用javascript/jQuery解决方案。Html：|2792468|<img+id="asks"+src="http://dummyimage.com/100x100/000/fff"+/>|2792469|jQuery：|2792470|$('#asks')
++.mouseenter(function(){$('#asks').attr('src',+'http://dummyimage.com/100x100/eb00eb/fff');})
++.mouseleave(function(){$('#asks').attr('src',+'http://dummyimage.com/100x100/000/fff');});|2792471|entityMap^0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|Y|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>You cannot change the img src using css. You can use the following pure css solution though. 
HTML:</p>

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

<p>CSS:</p>

<pre><code>#asks {
  width: 100px;
  height: 100px;
  background-image: url('http://dummyimage.com/100x100/0000/fff');
}

#asks:hover {
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</code></pre>

<p>Or, if you don't want to use a div with a background image, you can use a javascript/jQuery solution. 
Html:</p>

<pre><code>&lt;img id="asks" src="http://dummyimage.com/100x100/000/fff" /&gt;
</code></pre>

<p>jQuery:</p>

<pre><code>$('#asks')
  .mouseenter(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/eb00eb/fff');})
  .mouseleave(function(){$('#asks').attr('src', 'http://dummyimage.com/100x100/000/fff');});
</code></pre>


blocks|key|2792488|text|为此，您可以使用以下代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2792489|1)+html|2792490|<div+id+=+"aks">

</div>|code-block|syntax|javascript|2792491|2)+css|2792492|#aks
++++{
++++++++width:100px;
height:100px;++++

++++++++background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover+{
++++background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}|2792493|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|$]]

<p>For this you can use below code</p>

<p>1) html</p>

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

&lt;/div&gt;
</code></pre>

<p>2) css</p>

<pre><code>#aks
    {
        width:100px;
height:100px;    

        background-image:url('http://dummyimage.com/100x100/000/fff');}

#aks:hover {
    background-image:url('http://dummyimage.com/100x100/eb00eb/fff');

}
</code></pre>


blocks|key|3004873|text|只有html和css，改变图片的src是不可能的。如果将img标记替换为div标记，则可以更改设置为背景的图像，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3004874|div+{
++++background:+url('http://dummyimage.com/100x100/000/fff');
}
div:hover+{
++++background:+url('http://dummyimage.com/100x100/eb00eb/fff');
}|code-block|syntax|javascript|3004875|如果您认为可以使用一些javascript代码，那么您应该能够更改img标记的src，如下所示|3004876|​|3004877|function+hover(element)+{
++element.setAttribute('src',+'http://dummyimage.com/100x100/eb00eb/fff');
}

function+unhover(element)+{
++element.setAttribute('src',+'http://dummyimage.com/100x100/000/fff');
}|3004878|<img+id="my-img"+src="http://dummyimage.com/100x100/000/fff"+onmouseover="hover(this);"+onmouseout="unhover(this);"+/>|3004879|3004880|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|U|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|O|3|J|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like </p>

<pre><code>div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</code></pre>

<p>And if you think you can use some javascript code then you should be able to change the src of the img tag as below</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2792538|text|你可以做的是通过将width和height设置为0来隐藏实际图像，并应用一些CSS来做你想做的事情。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2792539|#aks+{
++++width:0px;
++++height:0px;
++++background:url('http://dummyimage.com/100x100/000/fff');
++++padding:50px;
}

#aks:hover+{
++++background:+url('http://dummyimage.com/100x100/eb00eb/fff');
}|code-block|syntax|javascript|2792540|以及使img标记达到您想要的大小(实际图像大小的一半)的填充。|2792541|Fiddle|2792542|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ec9gn/22/^0|9|5|F|6|0|0|3|3|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|O|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>What you could do is cheat a little bit by setting <code>width</code> and <code>height</code> to 0 to hide the actual image and apply some CSS to do what you want:</p>

<pre><code>#aks {
    width:0px;
    height:0px;
    background:url('http://dummyimage.com/100x100/000/fff');
    padding:50px;
}

#aks:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</code></pre>

<p>And the padding making the <code>img</code> tag the size you want it to have (half the size of your actual image).</p>

<p><a href="http://jsfiddle.net/ec9gn/22/" rel="noreferrer">Fiddle</a></p>


blocks|key|183072|text|我还有一个解决方案。如果有人使用AngularJs：http://jsfiddle.net/ec9gn/30/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|183073|<div+ng-controller='ctrl'>
++++<img+ng-mouseover="img='eb00eb'"++ng-mouseleave="img='000'"
+++++++++ng-src='http://dummyimage.com/100x100/{{img}}/fff'+/>
</div>|code-block|syntax|javascript|183074|Javascript：|183075|function+ctrl($scope){
++++$scope.img=+'000';
}|183076|无CSS+%5E%5E。|183077|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ec9gn/30/^0|Q|T|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|13|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>I have one more solution. If anybody uses AngularJs :
    <a href="http://jsfiddle.net/ec9gn/30/" rel="noreferrer">http://jsfiddle.net/ec9gn/30/</a></p>

<pre><code>&lt;div ng-controller='ctrl'&gt;
    &lt;img ng-mouseover="img='eb00eb'"  ng-mouseleave="img='000'"
         ng-src='http://dummyimage.com/100x100/{{img}}/fff' /&gt;
&lt;/div&gt;
</code></pre>

<p>The Javascript :</p>

<pre><code>function ctrl($scope){
    $scope.img= '000';
}
</code></pre>

<p>No CSS ^^.</p>


blocks|key|181504|text|我有类似的问题-我想替换图片上:悬停，但不能使用BACKGRUND-IMAGE，因为缺乏Bootstrap的自适应设计。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|181505|如果你像我一样只想改变图片:hover+(但不坚持改变特定图片标签的SRC+)，你可以这样做--这是CSS-only的解决方案。|181506|HTML：|181507|<li>
++<img+src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
++<img+class="hoverPhoto"+src="/picts/doctors/Small/Zharkova_small.jpg">
</li>|code-block|syntax|javascript|181508|CSS：|181509|li+{+position:+relative;+overflow:+hidden;+}
li+img.hoverPhoto+{
++position:+absolute;
++top:+0;
++right:+0;
++left:+0;
++bottom:+0;
++opacity:+0;
}
li.hover+img+{+/*+it's+optional+-+for+nicer+transition+effect+*/
++opacity:+0;
++-web-kit-transition:++opacity+1s+ease;
++-moz-transition:++opacity+1s+ease;li+
++-o-transition:++++opacity+1s+ease;
++transition:+++opacity+1s+ease;
}
li.hover+img.hoverPhoto+{+opacity:+1;+}|181510|如果你想要IE7兼容的代码，你可以通过定位来隐藏/显示:悬停图像，而不是通过不透明度。|181511|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|$]]

<p>I had similar problem - I want to replace picture on :hover but can't use BACKGRUND-IMAGE due to lack of Bootstrap's adaptive design.</p>

<p>If you like me only want to change the picture on :hover (but not insist of change SRC for the certain image tag) you can do something like this - it's CSS-only solution.</p>

<p>HTML:</p>

<pre><code>&lt;li&gt;
  &lt;img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg"&gt;
  &lt;img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg"&gt;
&lt;/li&gt;
</code></pre>

<p>CSS:</p>

<pre><code>li { position: relative; overflow: hidden; }
li img.hoverPhoto {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
  opacity: 0;
  -web-kit-transition:  opacity 1s ease;
  -moz-transition:  opacity 1s ease;li 
  -o-transition:    opacity 1s ease;
  transition:   opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }
</code></pre>

<p>If you want IE7-compatible code you may hide/show :HOVER image by positioning not by opacity.</p>


blocks|key|179093|text|在较旧的浏览器上，:hover仅适用于<a>元素。所以你必须做一些like+this的事情才能让它工作。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|179094|<style>
a#aks
{
++++width:100px;
++++height:100px;
++++display:block;
}

a#aks:link
{
++background-image:+url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
++background-image:+url('http://dummyimage.com/100x100/eb00eb/fff');
}
</style>

<a+href="#"+id="aks"></a>|code-block|syntax|javascript|179095|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/ec9gn/78/^0|9|6|J|3|X|9|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|L|$M|$5|N|O|P|E|$Q|R]]]]

<p>On older browsers, <code>:hover</code> only worked on <code>&lt;a&gt;</code> elements.  So you'd have to do something <a href="http://jsfiddle.net/ec9gn/78/" rel="nofollow">like this</a> to get it to work.</p>

<pre><code>&lt;style&gt;
a#aks
{
    width:100px;
    height:100px;
    display:block;
}

a#aks:link
{
  background-image: url('http://dummyimage.com/100x100/000/fff');
}

a#aks:hover
{
  background-image: url('http://dummyimage.com/100x100/eb00eb/fff');
}
&lt;/style&gt;

&lt;a href="#" id="aks"&gt;&lt;/a&gt;
</code></pre>


blocks|key|179104|text|就我个人而言，我会选择JavaScript+/+jQuery解决方案之一。这不仅保留了HTML的语义(即，图像显示为img元素，并在标记中定义了通常的src图像)，而且如果您使用JS+/+jQuery解决方案，那么您还可以使用JS+/+jQuery预加载悬停图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179105|预加载悬停图像将意味着当用户将鼠标悬停在原始图像上时，可能不会出现下载延迟，从而使您的网站表现得更加专业。|179106|这确实意味着你依赖于JS，但极少数没有启用JS的人可能不会太大惊小怪--其他人都会得到更好的体验……而且你的代码也会很好！|179107|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

<p>Personally, I would go with one of the JavaScript / jQuery solutions. Not only does this keep your HTML semantic (i.e., an image is shown as an img element with it's usual src image defined in the markup), but if you use a JS / jQuery solution then you will also be able to use the JS / jQuery to <em>preload</em> your hover image.</p>

<p>Preloading the hover image will mean there is likely to be no download delay when the user hovers over the original image, resulting in your site behaving much more professionally.</p>

<p>It does mean you have a dependency on JS, but the tiny minority that don't have JS enabled are probably not going to be too fussed - and everyone else will get a better experience... and your code will be good, too!</p>


blocks|key|3005087|text|我已经修改了一些与Patrick+Kostjens相关的更改。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3005088|<a+href="#">
<img+src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png"+
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0"+alt=""/></a>|code-block|syntax|javascript|3005089|演示|3005090|http://jsfiddle.net/ssuryar/wcmHu/429/|offset|length|3005091|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|12|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|U|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|V|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|W|8|@]|9|@$K|X|L|Y|1|Z]]|A|$]]|$1|M|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|J]]]]

<p>I have modified few changes related to Patrick Kostjens.</p>

<pre><code>&lt;a href="#"&gt;
&lt;img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/&gt;&lt;/a&gt;
</code></pre>

<p>DEMO</p>

<p><a href="http://jsfiddle.net/ssuryar/wcmHu/429/" rel="noreferrer">http://jsfiddle.net/ssuryar/wcmHu/429/</a></p>


blocks|key|2792689|text|这是一个纯CSS解决方案。将可见图像放在img标记中，将第二个图像作为css中的背景，然后隐藏悬停时的图像。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2792690|.buttons{
width:90%25;
margin-left:5%25;
margin-right:5%25;
margin-top:2%25;
}
.buttons+ul{}+++
.buttons+ul+li{
display:inline-block;
width:22%25;
margin:1%25;
position:relative;
}
.buttons+ul+li+a+p{
position:absolute;
top:40%25;
text-align:center;
}+++
.but1{
background:url('scales.jpg')+center+no-repeat;
background-size:cover;
}
.but1+a:hover+img{
visibility:hidden;
}+++
.but2{
background:url('scales.jpg')+center+no-repeat;
background-size:cover;
}
.but2+a:hover+img{
visibility:hidden;
}+++
.but3{
background:url('scales.jpg')+center+no-repeat;
background-size:cover;
}
.but3+a:hover+img{
visibility:hidden;
}+++
.but4{
background:url('scales.jpg')+center+no-repeat;
background-size:cover;
}+++
.but4+a:hover+img{
visibility:hidden;
}+++++++++++

<div+class='buttons'>
<ul>
<li+class='but1'><a+href='#'><img+src='scalesb.jpg'+height='300'+width='300'+alt=''+/><p>Blog</p></a></li>
<li+class='but2'><a+href='#'><img+src='scalesb.jpg'+height='300'+width='300'+alt=''+/>+<p>Herrero</p></a></li>
<li+class='but3'><a+href='#'><img+src='scalesb.jpg'+height='300'+width='300'+alt=''+/><p>Loftin</p></a></li>
<li+class='but4'><a+href='#'><img+src='scalesb.jpg'+height='300'+width='300'+alt=''+/><p>Contact</p></a></li>
</ul>
</div>|code-block|syntax|javascript|2792691|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|$]]

<p>Heres a pure CSS solution.  Put the visible image in the img tag, put the second image as a background in the css, then hide the image on hover.    </p>

<pre><code>.buttons{
width:90%;
margin-left:5%;
margin-right:5%;
margin-top:2%;
}
.buttons ul{}   
.buttons ul li{
display:inline-block;
width:22%;
margin:1%;
position:relative;
}
.buttons ul li a p{
position:absolute;
top:40%;
text-align:center;
}   
.but1{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but1 a:hover img{
visibility:hidden;
}   
.but2{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but2 a:hover img{
visibility:hidden;
}   
.but3{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}
.but3 a:hover img{
visibility:hidden;
}   
.but4{
background:url('scales.jpg') center no-repeat;
background-size:cover;
}   
.but4 a:hover img{
visibility:hidden;
}           

&lt;div class='buttons'&gt;
&lt;ul&gt;
&lt;li class='but1'&gt;&lt;a href='#'&gt;&lt;img src='scalesb.jpg' height='300' width='300' alt='' /&gt;&lt;p&gt;Blog&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class='but2'&gt;&lt;a href='#'&gt;&lt;img src='scalesb.jpg' height='300' width='300' alt='' /&gt; &lt;p&gt;Herrero&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class='but3'&gt;&lt;a href='#'&gt;&lt;img src='scalesb.jpg' height='300' width='300' alt='' /&gt;&lt;p&gt;Loftin&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li class='but4'&gt;&lt;a href='#'&gt;&lt;img src='scalesb.jpg' height='300' width='300' alt='' /&gt;&lt;p&gt;Contact&lt;/p&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
</code></pre>


blocks|key|2792714|text|更改镜像的src的最好方法是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2792715|<img+src='willbehidden.png'+style="width:0px;+height:0px;+padding:+8px;+background:+url(newimage.png);">|code-block|syntax|javascript|2792716|查看现场演示：http://www.audenaerde.org/csstricks.html#imagereplacecss|2792717|享受吧！|2792718|entityMap|0|LINK|mutability|MUTABLE|url|http://www.audenaerde.org/csstricks.html#imagereplacecss^0|5|3|0|0|7|1K|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>The best way to change <code>src</code> for image is:</p>

<pre><code>&lt;img src='willbehidden.png' style="width:0px; height:0px; padding: 8px; background: url(newimage.png);"&gt;
</code></pre>

<p>See live demo: <a href="http://www.audenaerde.org/csstricks.html#imagereplacecss" rel="nofollow">http://www.audenaerde.org/csstricks.html#imagereplacecss</a></p>

<p>Enjoy!</p>


blocks|key|3005202|text|我也有类似的问题，但我的解决方案是有两个图像，一个隐藏(显示:无)，另一个可见。将鼠标悬停在周围的跨度上时，原始图像将更改为display:none，另一个图像将更改为display:block。(根据您的情况，可能会使用'inline‘)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3005203|这个例子使用了两个span标签，而不是图像，所以当你在这里运行它时你可以看到结果。不幸的是，我没有任何在线图片来源可供使用。|3005204|​|3005205|#onhover+{
++display:+none;
}
#surround:hover+span[id="initial"]+{
++display:+none;
}
#surround:hover+span[id="onhover"]+{
++display:+block;
}|code-block|syntax|javascript|3005206|<span+id="surround">
++++<span+id="initial">original</span>
++++<span+id="onhover">replacement</span>
</span>|3005207|3005208|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I had a similar problem but my solution was to have two images, one hidden (display:none) and one visible.  On the hover over a surrounding span, the original image changes to display:none and the other image to display:block.  (Might use 'inline' instead depending on your circumstances)</p>

<p>This example uses two span tags instead of images so you can see the result when running it here.  I didn't have any online image sources to use unfortunately.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id="surround"&gt;
    &lt;span id="initial"&gt;original&lt;/span&gt;
    &lt;span id="onhover"&gt;replacement&lt;/span&gt;
&lt;/span&gt;</code></pre>
</div>
</div>
</p>


blocks|key|179158|text|下面的代码可以在Chrome和Firefox上运行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|179159|<a+href="#"><img+src="me-more-smile.jpg"+onmouseover="this.src='me-thinking-about-a-date.jpg'"+onmouseout="this.src='me-more-smile.jpg'"+border="0"+alt=""/></a>|code-block|syntax|javascript|179160|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|$]]

<p>The following code works at both Chrome and Firefox</p>

<pre><code>&lt;a href="#"&gt;&lt;img src="me-more-smile.jpg" onmouseover="this.src='me-thinking-about-a-date.jpg'" onmouseout="this.src='me-more-smile.jpg'" border="0" alt=""/&gt;&lt;/a&gt;
</code></pre>


blocks|key|3005260|text|这里是使用纯CSS的另一种方法。我们的想法是在HTML标记中包括这两个图像，并相应地在上显示或隐藏这些图像:hover|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3005261|HTML|offset|length|style|BOLD|3005262|<a>
+++<img+src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png"+/>+
+++<img+src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png"+/>
</a>|code-block|syntax|javascript|3005263|CSS|3005264|a+img:last-child+{
++display:+none;++
}
a:hover+img:last-child+{
++display:+block;++
}
a:hover+img:first-child+{
++display:+none;++
}|3005265|jsfiddle：https://jsfiddle.net/m4v1onyL/|3005266|请注意，为了正确显示，所使用的图像具有相同的尺寸。此外，这些图像文件大小非常小，因此在这种情况下加载多个图像不是问题，但如果您希望切换大尺寸图像的显示，则可能是问题。|3005267|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/m4v1onyL/^0|0|0|4|0|0|0|3|0|0|9|U|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@$D|14|E|15|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|1A|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|S|3|T|5|6|7|1F|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>Here is an alternate approach using pure CSS. The idea is to include both the images in the HTML markup and have these displayed or hidden accordingly on :hover</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;a&gt;
   &lt;img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /&gt; 
   &lt;img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" /&gt;
&lt;/a&gt;
</code></pre>

<p><strong>CSS</strong></p>

<pre><code>a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}
</code></pre>

<p>jsfiddle: <a href="https://jsfiddle.net/m4v1onyL/" rel="noreferrer">https://jsfiddle.net/m4v1onyL/</a></p>

<p>Note that the images used are of the same dimensions for proper display. Also, these images file sizes are quite small so loading multiple is not an issue in this case but may be if you are looking to toggle display of large sized images.</p>


blocks|key|183233|text|试试这段代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|183234|​|183235|+++.card+{

++++++++++++width:+200px;

++++++++++++height:+195px;

++++++++++++position:+relative;

++++++++++++display:+inline-block;

++++++++}

++++++++.card+.img-top+{

++++++++++++display:+none;

++++++++++++position:+absolute;

++++++++++++top:+0;

++++++++++++left:+0;
+++++++++++
++++++++++++z-index:+99;
width:200px;
++++++++}

++++++++.card:hover+.img-top+{

++++++++++++display:+inline;

++++++++}|code-block|syntax|javascript|183236|+<!DOCTYPE+html>

++++<html+lang="en">

++++<head>

++++<title>Image+Change+on+Hover+with+CSS</title>

+
++++</head>

++++<body>

++++++++<div+class="card">

++++++++++++<img+src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg"+alt="Card+Back"+style="width:200px">

++++++++++++<img+src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg"+class="img-top"+alt="Card+Front">

++++++++</div>

++++</body>

++++</html>|183237|183238|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Try This Code.</p>

<p><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>   .card {

            width: 200px;

            height: 195px;

            position: relative;

            display: inline-block;

        }

        .card .img-top {

            display: none;

            position: absolute;

            top: 0;

            left: 0;
           
            z-index: 99;
width:200px;
        }

        .card:hover .img-top {

            display: inline;

        }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt;

    &lt;html lang="en"&gt;

    &lt;head&gt;

    &lt;title&gt;Image Change on Hover with CSS&lt;/title&gt;

 
    &lt;/head&gt;

    &lt;body&gt;

        &lt;div class="card"&gt;

            &lt;img src="http://www.dhresource.com/200x200s/f2-albu-g5-M00-EC-97-rBVaJFkAobCAHD9XAADvz9DDocA266.jpg/diy-wall-stickers-home-decor-nature-colorful.jpg" alt="Card Back" style="width:200px"&gt;

            &lt;img src="https://s-media-cache-ak0.pinimg.com/236x/31/17/98/3117987a0be0a7d8976869aabf54d2d7.jpg" class="img-top" alt="Card Front"&gt;

        &lt;/div&gt;

    &lt;/body&gt;

    &lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2792851|text|关于语义，我不喜欢到目前为止给出的任何解决方案。因此，我个人使用以下解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2792852|​|2792853|.img-wrapper+{
++display:+inline-block;
++background-image:+url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper+>+img+{
++vertical-align:+top;
}

.img-wrapper+>+img:hover+{
++opacity:+0;
}|code-block|syntax|javascript|2792854|<div+class="img-wrapper">
++<img+src="https://www.w3schools.com/w3css/img_lights.jpg"+alt="image"+/>
</div>|2792855|2792856|这是一个CSS唯一的解决方案，具有良好的浏览器兼容性。它利用了一个图像包装器，该图像包装器具有最初被图像本身隐藏的背景。在悬停时，图像通过不透明度隐藏，因此背景图像变为可见。这样，在标记代码中就不会有一个空的包装器，而是一个真实的图像。|2792857|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Concerning semantics, I do not like any solution given so far. Therefore, I personally use the following solution:</p>

<p><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>.img-wrapper {
  display: inline-block;
  background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}

.img-wrapper &gt; img {
  vertical-align: top;
}

.img-wrapper &gt; img:hover {
  opacity: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="img-wrapper"&gt;
  &lt;img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>This is a CSS only solution with good browser compatibility. It makes use of an image wrapper that has a background which is initially hidden by the image itself. On hover, the image is hidden through the opacity, hence the background image becomes visible. This way, one does not have an empty wrapper but a real image in the markup code.</p>


blocks|key|183280|text|还有一种只使用的简单方法！|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|183281|只需像这样用<img>包装您的div标记：|CODE|183282|<div+class="image-wrapper">
++++<img+src="http://dummyimage.com/100x100/000/fff">
</div>|code-block|syntax|javascript|183283|然后，在CSS文件中隐藏img并设置包装div元素的背景图像：|183284|.image-wrapper:hover+{
++++background-image:+url(http://dummyimage.com/100x100/eb00eb/fff);
++++background-size:+contain;
++++background-repeat:+no-repeat;
}

.image-wrapper:hover+img+{
++++display:+none;
}|183285|Et+voilà!|183286|entityMap^0|7|6|0|6|5|0|0|0|0|0|9|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@$9|Z|A|10|B|H]]|D|@]|E|$]]|$1|I|3|J|5|K|7|11|8|@]|D|@]|E|$L|M]]|$1|N|3|O|5|6|7|12|8|@]|D|@]|E|$]]|$1|P|3|Q|5|K|7|13|8|@]|D|@]|E|$L|M]]|$1|R|3|S|5|6|7|14|8|@$9|15|A|16|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|U|$]]

<p><strong>There is another simple way using HTML and CSS only!</strong><br><br>Just wrap your <code>&lt;img&gt;</code> tag with div like so:</p>
<pre><code>&lt;div class=&quot;image-wrapper&quot;&gt;
    &lt;img src=&quot;http://dummyimage.com/100x100/000/fff&quot;&gt;
&lt;/div&gt;
</code></pre>
<p>Then, in your CSS file hide the img and set the background image for the wrapping div element:</p>
<pre><code>.image-wrapper:hover {
    background-image: url(http://dummyimage.com/100x100/eb00eb/fff);
    background-size: contain;
    background-repeat: no-repeat;
}

.image-wrapper:hover img {
    display: none;
}
</code></pre>
<p><br><strong>Et voilà!</strong></p>


<p>I need to change <code>&lt;img&gt;</code> source URL on <code>hover</code>.</p>
<p>I have tried this but won't work :</p>
<p>HTML</p>
<pre><code>&lt;img id=&quot;my-img&quot; src=&quot;http://dummyimage.com/100x100/000/fff&quot;/&gt;
</code></pre>
<p>CSS</p>
<pre><code>#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}
</code></pre>
<p><a href="http://jsfiddle.net/ec9gn/" rel="nofollow noreferrer">jsFiddle</a></p>
<p>Any help would be appreciated.</p>
<p><strong>Update:</strong></p>
<p>This only works for Webkit / Google Chrome.</p>


How to change source of <img> tag on hover?

jQuery

我需要更改hover上的<img>源地址。我已经尝试过了，但不起作用：HTML<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>CSS#my-img:hover {    content: url('http://dummyimage.com/1...

问如何在悬停时更改<img>标签的来源？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在悬停时更改<img>标签的来源？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在悬停时更改<img>标签的来源？
EN