CSS樣式：如何更改圖像時，它是懸停？

我試圖在圖像懸停時將圖像懸停效果更改爲另一張圖像。當我不使用錨標記時，似乎無法使其工作。我的目標是當我將鼠標懸停在按鈕上時改變圖片，我相信這需要一些jQuery魔法。這裏是我的代碼，只是試圖改變圖像時，盤旋，但不知何故不工作。我錯過了什麼嗎？CSS樣式：如何更改圖像時，它是懸停？

HTML 
<div> 
<img src="images/newpic.png" class="img-circle homeimage" alt="Responsive image"/> 
</div> 

CSS 
.homeimage { 
    height:200px; 
    width: auto; 
    background-image: url('../images/newpic.png'); 
} 

.homeimage:hover { 
    background-image: url('../images/funnypic.png'); 
}

來源

2015-02-23 TL12321

可以實現它沒有jQuery的 – PRAH 2015-02-23 05:51:25

要更改HTML中的懸停背景圖像或圖像？ – PRAH 2015-02-23 05:52:12

爲什麼你把圖像放在html和css背景中。 – vivek 2015-02-23 05:53:23

這裏是使用jQuery
的一個實例：這可以讓你使用hover與image標籤無論容器是：

jQuery的

$(document).ready(function() { 
    $('.imgh') 
     .mouseover(function() { 
     $(this).attr("src", "http://taditdash.files.wordpress.com/2014/01/tadit-dash.jpg"); 
    }) 
     .mouseout(function() { 
     $(this).attr("src", "http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif"); 
    }); 
});

HMTL

<img src="http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif" alt="rajkumar" class="imgh"></img>

Live Demo

來源

2015-02-23 05:55:27

非常感謝！出於某種原因，所有的css選項都不起作用，但jQuery的功能就像一個魅力。 jQuery的魔力太強大了。 – TL12321 2015-02-24 01:16:05

這不會工作，因爲你把類的圖像標記嘗試使IMG成一個div，並給它的高度和寬度看看這個js小提琴

.container{ 
 
    width 100%; 
 
    height: 500px; 
 
} 
 

 
.picture { 
 
    height:500px; 
 
    width: 500px; 
 
    background-image: url('http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg'); 
 
    background-repeat:no-repeat; 
 
} 
 

 
.picture:hover { 
 
    background-image: url('http://www.online-image-editor.com//styles/2014/images/example_image.png'); 
 
}

<div class="container"> 
 
    <div class="picture"> 
 
     
 
    </div> 
 
    
 
</div>

http://jsfiddle.net/kriscoulson/a0dodtjn/1/

來源

2015-02-23 05:55:52 Enjayy

你只能用CSS來解決。

HTML

<img class="img-circle homeimage" alt="Responsive image"/>

CSS

.homeimage { 
    height:200px; 
    width: auto; 
    background: url('https://www.google.co.kr/images/hpp/lightbulb-icon-39x39.png') no-repeat; 
} 

.homeimage:hover { 
    background: url('http://www.google.com/images/logos/url_shortener_logo.gif') no-repeat; 
}

DEMO：http://jsfiddle.net/ymyL949n/

來源

2015-02-23 05:57:58 Stella

如果你想改變它從HTML調用IMG你可以嘗試沒有jQuery和JavaScript的這個解決方案。 http://jsbin.com/sujigakeru/8/edit

HTML

<div class="container"> 

    <div class="content"> 
     <img src="http://www.makemenoise.com/wp-content/uploads/2012/08/wordpress-logo-200x200.png" alt="Responsive image"/> 
    </div> 

    <div class="hover"> 
     <img src="http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png" alt=""> 
    </div> 

    </div>

CSS

.container{ 
    width:200px; 
    height:200px; 
    position:relative; 

} 
.hover{ 
    display:none; 
    position:absolute; 
    top:0; 
    left:0; 
    z-index:1; 
} 
.container:hover .hover{ 
    display:block; 
}

來源

2015-02-23 05:58:05 PRAH

你可以做到這一點使用CSS了。你需要改變一個按鈕的懸停背景圖片：

CSS：

img { 
    display:block; 
    width:400px; 
    height:300px; 
    background-image:url("http://lorempixel.com/600/200/sports/1/") 
} 
.css:hover ~ img { 
    background-image:url("http://lorempixel.com/600/200/sports/2/") 
} 

<button class="css">CSS</button> 
<img src="/image.png" />

確保元素順序保持不變。圖像前按鈕應該先出現。

演示：http://jsfiddle.net/lotusgodkk/GCu2D/573/

來源

2015-02-23 05:58:19

CSS樣式：如何更改圖像時，它是懸停？

回答

相關問題