标题悬停 - 更改图像答案

【问题标题】：Title hover - change image标题悬停 - 更改图像
【发布时间】：2017-03-26 14:05:59
【问题描述】：

我有一张上面有标题的图片。当我将鼠标悬停在标题上时，我想显示不同的图像。

我如何创建它？

title code

image code

我想我得在问号上写点什么，但是什么？

【问题讨论】：

图片如何包含在img标签中或作为标题的背景？
在 img 标签中。图片在标题下方，但不作为背景
请分享一些 HTML 代码。

标签： javascript css wordpress

【解决方案1】：

使用 jQuery。

$(function() {
    $("img")
        .mouseover(function() { 
            $(this).attr("src", "newImage.jpg");
        })
        .mouseout(function() {
            $(this).attr("src", "originalImage.jpg");
        });
});

【讨论】：

【解决方案2】：

您可以使用上述 jquery 的修改版本或仅使用 css。为图像提供一个 id 并使用 @Sandwell 发布的 jquery 代码中的 id

如果你使用 css 试试 :hover 属性

【讨论】：

我在 :hover 属性上放什么
抱歉回复晚了。但如果它对其他人有帮助，让我解释一下。我们可以通过编写类似下面的<div id="my-img> </div> css #my-mg { background: url('first-img.jpg') } #my-mg:hover { background: url('second-img.jpg') } 来实现这一点