139

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

jsフィドル

どんな助けでも大歓迎です。

アップデート：

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

4

20 に答える 20

127

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/

于 2014-05-19T09:17:26.063 に答える
34

純粋な 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/

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

于 2016-05-27T14:13:09.783 に答える
19

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

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

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

于 2015-01-12T21:41:16.687 に答える
16

widthあなたができることは、とheightを 0 に設定して実際の画像を非表示にし、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タグを必要なサイズにするパディング（実際の画像の半分のサイズ）。

フィドル

于 2013-08-03T11:37:48.737 に答える
6

もう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なし^^。

于 2013-08-03T12:43:37.360 に答える
4

フィドル

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
    });
 });
于 2013-08-03T11:18:01.313 に答える
3

CSS を使用して を変更することはできないため、srcjQuery を使用できる場合は、このフィドルを確認してください。

デモ

$('#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 ライブラリが含まれている必要があることに注意してください。

于 2013-08-03T11:22:29.037 に答える
1

古いブラウザーでは、要素で: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>
于 2014-01-08T01:25:51.210 に答える
0

Heres は、純粋な 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>
于 2014-10-29T00:07:05.050 に答える
0

HTML と CSS のみを使用する簡単な方法がもう 1 つあります。次のように、タグを div で

ラップするだけです。<img>

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


ほら！

于 2020-06-23T13:59:08.320 に答える