如何在懸停時更改'a'標籤內的img？

我在a標籤內有img。當懸停在a上時，我想更改圖片網址。 CSS有可能嗎？如果a標籤則是另一回事內如何在懸停時更改'a'標籤內的img？

.element:hover{ 
    background-image:url(bg.jpg); 
}

甚至

.element:hover a{ 
    background-image:url(bg.jpg); 
}

：

<a href="#"><img src="img/takipet.png" alt=""></a>

來源

2014-01-31 user3226744

這是微不足道的CSS，但也有幾種不同的方法。我們需要更多關於你想要實現的信息（例如，背景圖像是否正常？什麼決定了新圖像，它可以在標記中？）。 – CherryFlavourPez

你有幾個方法可以做到這一點。

如果你喜歡使用CSS，你應該用背景圖像財產

a.some_class{ 
    background-image:url(your_image_url); 
    background-repeat: no-repeat; 
    display: block;  
    height:image_height; 
    width:image_width; 
} 

a.some_class:hover{ 
    background-image:url(your_image_url2); 
}

代替你也可以使用包裹着事業部兩個圖像。並顯示/隱藏需要在div懸停。

使用jQuery

$('a img.your_img_class').mouseover(function() { 
    $(this).attr("src", "hover_1_src"); 
}) 
.mouseout(function() { 
    $(this).attr("src", "old_src"); 
});

來源

2014-01-31 10:48:01 MustDie1Bit

如果它是一個背景圖片，你可以做到這一點。

來源

2014-01-31 10:31:24 Albzi

直接回答你的問題，這裏有一個CSS-唯一的方法：

HTML：

<div id="the-image-wrapper"> 
    <img id="image-main" src="some/src"> 
    <img id="image-alternate" src="some/other/src"> 
</div>

CSS：

#image-alternate {display: none;} 
#the-image-wrapper:hover #image-main {display: none;} 
#the-image-wrapper:hover #image-alternate {display: inline;}

你可能會更好過但嘗試了另一種途徑，比如使用背景圖片代替。當然，這取決於應用程序。

如果您要使用background-image路由，您應該使用take a look at using sprites。

來源

2014-01-31 10:39:47

更改src=""屬性是不能通過使用CSS更改。只需使用Javascript或Jquery進行更改。
你可以通過css來控制樣式。
創建Div元素併爲其設置背景圖像。

HTML教程：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
<style> 
#MyDiv{ 
    width:100%; 
    height:100%; 
    background-image: url('Image.jpg'); 
} 
#MyDiv:hover{ 
background-image: url('NewImage.jpg'); 
} 
</style> 
</head> 
<body> 
    <div id="MyDiv" > </div> 
</body> 
</html>

的Html的Javascript：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
</head> 
<body> 
    <img src="http://codeorigin.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" onmouseover="this.src='http://www.google.com/images/srpr/logo11w.png';" > 
</body> 
</html>

來源

2014-01-31 10:47:17

如何在懸停時更改'a'標籤內的img？

回答

相關問題