Question

在有大量图片的网站上，我想在每个图片上添加鼠标悬停事件。

我可以这样做：

<img class="brand" 
     src="img/brands-grey/image1.svg" 
     onmouseover="this.src='img/brands/image1.svg';" 
     onmouseout="this.src='img/brands-grey/image1.svg';"/>
<img class="brand" 
     src="img/brands-grey/image2.svg" 
     onmouseover="this.src='img/brands/image2.svg';" 
     onmouseout="this.src='img/brands-grey/image2.svg';"/>`

但我宁愿从src中删除/插入“-grey”onmouseover / out。有人可以向我指出如何做到这一点吗？

提前致谢！

Answer 1

您将jQuery作为标记，因此这是一个jQuery解决方案：

$(document).ready(function(){
    $('img.brand').mouseenter(function(){
        $(this).attr('src', $(this).attr('src').replace('-grey', ''));
    }).mouseleave(function(){
        $(this).attr('src', $(this).attr('src').replace('brands', 'brands-grey'));
    });
});

HTML会更清晰：

<img class="brand" src="img/brands-grey/image1.svg" />
<img class="brand" src="img/brands-grey/image2.svg" />

我不会使用2套图像，而是使用现有的jQuery插件，如jQuery.BlackAndWhite。

Answer 2

试试这个

            <img class="brand" src="img/brands-grey/image1.svg" onmouseover="this.src='img/brands/image1.svg';" onmouseout="this.src='img/brands-grey/image1.svg';"/>
            <img class="brand" src="img/brands-grey/image2.svg" onmouseover="this.src='img/brands/image2.svg';" onmouseout="this.src='img/brands-grey/image2.svg';"/>
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript">
            jQuery(function(){
                jQuery('img.brand').hover(function(){
                    // this function will be called when the mouse in
                    var src= $(this).attr('src');
                    src.replace('brands-grey', 'brands')    ;
                    $(this).attr('src', src);
                },
                function (){
                    // mouse out handler
                    var src= $(this).attr('src');
                    src.replace('brands', 'brands-grey');
                    $(this).attr('src', src);
                }
                )
            })
            </script>

请更正jquery路径路径。这里我们使用了jQuery悬停方法。并且jsut按照你的要求实现了从src添加/删除灰色部分的逻辑。

Answer 3

您可以使用CSS伪类:hover并使用包含两个图像的任何包装器，这在所有情况下都会有更好的行为：

HTML：

<span class="img-container">
    <img class="brand" src="img/brands-grey/image1.svg"/>
    <img class="brand-over" src="img/brands/image1.svg"/>
</span>
<span class="img-container">
    <img class="brand" src="img/brands-grey/image2.svg"/>
    <img class="brand-over" src="img/brands/image2.svg"/>
</span>

CSS：

.brand-over {
    display: none;
}

.img-container:hover .brand-over {
    display: inline;
}

.img-container:hover .brand {
    display: none;
}

现在如果brands-grey只是一个灰色的图像，你甚至不需要两个不同的图像，只需使用例如opacity: 0.4;和图像上的设置不透明度为1. jsFiddle < / p>

或使用带过渡的CSS3过滤器：jsFiddle

如何编辑img src onmouseover？

3 个答案: