CSS：img：hoverの画像ソースを変更

で<img>ソースURL を変更する必要がありますhover。

私はこれを試しましたが、うまくいきません：

HTML

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

任意の助けいただければ幸いです。

更新：

これはWebkit / Google Chromeでのみ機能します。

htmlとcssだけでは、画像のsrcを変更することはできません。imgタグをdivタグに置き換えると、背景として設定されている画像を次のように変更できる可能性があります

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

そして、あなたがいくつかのJavaScriptコードを使用できると思うなら、あなたは以下のようにimgタグのsrcを変更できるはずです

function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

Patrick Kostjensに関連するいくつかの変更を変更しました。

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

デモ

http://jsfiddle.net/ssuryar/wcmHu/429/

同様の問題がありましたが、私の解決策は、2つの画像（1つは非表示（display：none）、もう1つは表示）にすることでした。周囲のスパンにカーソルを合わせると、元の画像がdisplay：noneに変わり、他の画像がdisplay：blockに変わります。（状況によっては、代わりに「インライン」を使用する場合があります）

この例では、イメージの代わりに2つのスパンタグを使用しているため、ここで実行すると結果を確認できます。残念ながら、使用するオンライン画像ソースはありませんでした。

#onhover {
  display: none;
}
#surround:hover span[id="initial"] {
  display: none;
}
#surround:hover span[id="onhover"] {
  display: block;
}

<span id="surround">
    <span id="initial">original</span>
    <span id="onhover">replacement</span>
</span>

あなたができることは、0に設定widthしheightて実際の画像を非表示にし、CSSを適用して必要なことを行うことで、少しチートです：

#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');
}

また、パディングにより、imgタグのサイズを希望するサイズにします（実際の画像のサイズの半分）。

フィドル

純粋なCSSを使用した別のアプローチを次に示します。アイデアは、HTMLマークアップに両方の画像を含め、これらを：hoverに応じて表示または非表示にすることです

HTML

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

CSS

a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle：https ://jsfiddle.net/m4v1onyL/

使用される画像は、適切に表示するために同じ寸法であることに注意してください。また、これらの画像ファイルのサイズは非常に小さいため、この場合は複数のロードは問題になりませんが、大きなサイズの画像の表示を切り替える場合は問題になる可能性があります。

セマンティクスに関しては、これまでの解決策は好きではありません。したがって、私は個人的に次の解決策を使用します：

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

<div class="img-wrapper">
  <img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>

これは、CSSのみのソリューションで、ブラウザの互換性が良好です。最初は画像自体によって非表示になっている背景を持つ画像ラッパーを使用します。ホバーすると、画像は不透明度によって非表示になるため、背景画像が表示されます。この方法では、空のラッパーはなく、マークアップコードに実際の画像が含まれます。

もう1つの解決策があります。誰かがAngularJsを使用している場合：http : //jsfiddle.net/ec9gn/30/

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

JavaScript：

function ctrl($scope){
    $scope.img= '000';
}

CSSなし^^。

同様の問題がありました-：hoverの画像を置き換えたいのですが、Bootstrapのアダプティブデザインがないため、BACKGRUND-IMAGEを使用できません。

：hoverの画像のみを変更したい場合（ただし、特定のイメージタグのSRCの変更を要求しない場合）は、次のようなことができます-CSSのみのソリューションです。

HTML：

<li>
  <img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
  <img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>

CSS：

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

IE7互換のコードが必要な場合は、不透明度ではなく配置することで：HOVER画像を非表示/表示できます。

srcCSSを使用して変更することはできないため、jQueryがオプションである場合は、このフィドルを確認してください。

デモ

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

基本的には.hover()メソッドを使用しています...機能させるには2つの関数が必要です。ホバーに入ったときとホバーを出たとき

.attr（属性の省略形）を使用して属性を変更していsrcます。

これを機能させるには、フィドルのようにjQueryライブラリーを組み込む必要があることに注意してください。

フィドル

AshisKumarの回答に同意し
ます。以下のjQuery機能を使用して、マウスオーバーで画像のURLを変更する方法があります。

$(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
    });
 });

個人的には、JavaScript / jQueryソリューションの1つを使用します。これはHTMLのセマンティクスを維持するだけでなく（つまり、画像はimg要素として表示され、通常のsrc画像はマークアップで定義されます）、JS / jQueryソリューションを使用すると、JS /を使用することもできますホバー画像をプリロードするjQuery 。

ホバー画像をプリロードすると、ユーザーが元の画像にカーソルを合わせたときにダウンロードの遅延がなくなり、サイトがより専門的に動作するようになります。

それはあなたがJSに依存していることを意味しますが、JSを有効にしていない小さなマイノリティはおそらくそれほど騒がれることはないでしょう-そして、他の誰もがより良い経験を得るでしょう...そしてあなたのコードも良いでしょう！

を使用してimgタグのsrc属性を変更することはできませんCSS。JavaScript onmouseover()イベントハンドラを使用して可能。

HTML：

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

JavaScript：

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

cssを使用してimg srcを変更することはできません。ただし、次の純粋なcssソリューションを使用できます。HTML：

<div id="asks"></div>

CSS：

#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');
}

または、背景画像でdivを使用したくない場合は、javascript / jQueryソリューションを使用できます。HTML：

<img id="asks" src="http://dummyimage.com/100x100/000/fff" />

jQuery：

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

このため、以下のコードを使用できます

1）html

<div id = "aks">

</div>

2）css

#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');

}

古いブラウザで:hoverは、<a>要素でのみ機能していました。だから、あなたはそれを機能させるためにこのようなことをしなければならないでしょう。

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

次のコードはChromeとFirefoxの両方で機能します

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

純粋なCSSソリューションです。目に見える画像をimgタグに入れ、2番目の画像をcssの背景として入れ、ホバーで画像を非表示にします。

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

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

src画像を変更する最良の方法は次のとおりです。

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

ライブデモをご覧ください：http : //www.audenaerde.org/csstricks.html#imagereplacecss

楽しい！

このコードを試してください。

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

        }

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

HTMLとCSSのみを使用する別の簡単な方法があります。

次の<img>ようにタグをdivでラップするだけです：

<div class="image-wrapper">
    <img src="http://dummyimage.com/100x100/000/fff">
</div>

次に、CSSファイルでimgを非表示にし、ラッピングdiv要素の背景画像を設定します。

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

エボラ！