如何更改img src鏈接鼠標懸停？

Question

的HTML

<div module="product_listnormal">
        <ul>
            <li>
                <input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}">
                <div id="prdImgWrapper">
                     <a href="/product/detail.html{$param}" class="prdImg"><img src="{$image_medium}" alt="" class="prdImgImg"/></a>
                </div>
.....

所以我在img標簽中添加了onmouseover

<a href="/product/detail.html{$param}" class="prdImg"><img src="{$image_medium}" onmouseover="this.src={$image_medium} + 'aaa'" alt="" class="prdImgImg"/></a>

但它沒有調用{$image_medium}aaa link what's wrong?

例如） if $image_medium = 111.png $image_medium + aaa = 111aaa.png

Answer 1

您有兩個鏈接image_medium和image_medium2。

說出image_medium =“ a.jpg”和image_medium_2 =“ a_2.jpg”;

使用純JavaScript

1）如果知道值，則可以使用mouseenter和mouseleave事件添加相同的偵聽器

var divToBeHovered=document.getElementById("prdImgWrapper");
//add listener

divToBeHovered.addEventListener("mouseenter",function(){

      var imgEle=document.querySelector("#"+this.id+" img");
      imgEle.src="a_2.jpg"; //image_medium_2

},false);

divToBeHovered.addEventListener("mouseleave",function(){

      var imgEle=document.querySelector("#"+this.id+" img");
      imgEle.src="a.jpg"; //image_medium

},false);

2）如果您不知道值，即圖像的src是動態的，則可以創建一個函數，並在mouseenter和mouseleave事件上都調用它。

<a href="/product/detail.html{$param}" class="prdImg">
<img src="{$image_medium}" 
onmouseenter="changeURLOfImage(this,'{$image_medium}aaa')" 
onmouseleave="changeURLOfImage(this,'{$image_medium}')"
mouseralt="" class="prdImgImg"/></a>

function changeURLOfImage(imageElem,url){

    imageElem.src="url"

}

3）將直接值分配給src

<img onmouseenter='this.src ={$image_medium}aaa' onmouseleave='this.src ={$image_medium}'/>

Answer 2

我在這樣的鼠標懸停和鼠標離開功能上使用

onmouseover='this.src = this.src.replace(".jpg","_2.jpg")' onmouseleave='this.src = this.src.replate("_2.jpg", ".jpg")'

這個來源可以使用每張照片

Answer 3

可以使用純CSS通過使用兩個圖像並更改懸停狀態下的顯示來完成此操作。

 a.prdImg > img { display: inline-block; } a.prdImg > img + img { display: none; } a.prdImg:hover > img { display: none; } a.prdImg:hover > img + img { display: inline-block; } 

 <div module="product_listnormal"> <ul> <li> <input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}"> <div id="prdImgWrapper"> <a href="/product/detail.html{$param}" class="prdImg"><img src="http://media-cache-ak0.pinimg.com/736x/65/7e/a2/657ea254eb522135fbd59e0656a2e1dd.jpg" alt="" class="prdImgImg"/><img src="http://baconmockup.com/400/300" alt="" class="prdImgImg"/></a> </div> ..... 

順便說說; 不會導致this.src={$image_medium} + 'aaa' 111.png從111.png更改為111.pngaaa嗎？

Answer 4

雖然無法使用CSS更改圖像src，但您可以有2張圖像（一個隱藏）和一個容器，並且在容器上懸停時隱藏第一張圖像並顯示第二張圖像。 像這樣的東西：

HTML：

<div>
    <span>This could be an image</span>
    <span>This could be an image</span>
</div>

CSS：

div{
    float:left;
    width:200px;
    height:200px;
 }
div span{
    width:100%;
    height:100%;
    display:none;
    background-color:red;
 }
div span:first-child{
    display:block;
    background-color:lime;

}
div:hover span:first-child{
    display:none;
 }
div:hover span:nth-child(2){
     display:block;
}

看看： http : //jsfiddle.net/mzvaan/fs6mc952/

Answer 5

像這樣的html代碼

 <img src="sample1.png" id="newimg">

像這樣的腳本

$(document).ready(function(e) {
    $("#newimg").hover(function() {
        $("#newimg").attr('src', 'sample2.png');
        })
});