html代码如

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?

ex）if $image_medium = 111.png $image_medium + aaa = 111aaa.png

Answer 1

您有两个链接image_medium和image_medium2。

说image_medium =＆＃34; a.jpg＆＃34;和image_medium_2 =＆＃34; a_2.jpg＆＃34 ;;

使用纯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' src从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');
        })
});

如何改变img src链接鼠标悬停？

5 个答案:

html代码如

这样的脚本