当鼠标悬停在图像上时，图像不会变成另一个图像？答案

【问题标题】：Image does not change into another image when mouse hovers over it?当鼠标悬停在图像上时，图像不会变成另一个图像？
【发布时间】：2013-12-16 16:50:38
【问题描述】：

我有一张图片，我希望它在鼠标悬停在它上面时改变它的来源。它不适用于我目前拥有的代码。

#logo {
height: 15em;
width: 15em;
margin-left: auto;
margin-right: auto;
margin-top: -2.5em
}

#logo:hover {
content: url('C:\Users\haines\Desktop\Logo Hover.png');
height: 15em;
width: 15em;
margin-left: auto;
margin-right: auto;
margin-top: -2.5em
}

还有 HTML 代码：

<img id = "logo" src = "C:\Users\haines\Desktop\Logo.png" />

【问题讨论】：

您不能使用 CSS 更改 img 元素的 src。您可以使用 Javascript 来执行此操作，或者使用背景图像代替 img（如果您的图像是内容而不是装饰，这将是一个坏主意，在这种情况下您必须使用 Javascript 来解决您的问题）。

标签： image hover mouseover

【解决方案1】：

您必须使用背景图像来更改徽标时将鼠标悬停在它上面。不要在 html 中使用 img 标签来设置第一个日志 img。

#logo { 
    content: url("C:\Users\haines\Desktop\Logo.png"); 
}

另外，我会使用背景来代替内容，就像这样

#logo { 
    background: url("C:\Users\haines\Desktop\Logo.png"); 
}

你的 #logo:hover 也一样

【讨论】：

【解决方案2】：

使用图像标签可能不是最好的方式。我会推荐这样的东西。在您的 HTML 文件中

<div class="myImage"></div>

在你的 CSS 文件中你可以使用它

.myImage { background: url(images/logo.png); width: 200px; height: 200px;}
.myImage:hover { background: url(images/logoHoverState.png); }

并且您应该使用类而不是引用 ID。这使您的代码更具可回收性。

【讨论】：

【解决方案3】：

如果您希望徽标出现在 img 标签中，也许您可以在悬停时切换 src 值。 . .

JavaScript/Jquery

var LogoSwap = function() {
    var $this = $(this);
    var new = $this.data('hover');
    $this.data('hover', $this.attr('src'));
    $this.attr('src', new);
}

$(function() {
  $('img#logo').hover(LogoSwap, LogoSwap);
});

HTML

<img id="logo" src="C:\Users\haines\Desktop\Logo.png" data-hover="C:\Users\haines\Desktop\LogoHover.png" />

【讨论】：

【解决方案4】：

您不能仅使用 HTML 和 CSS 直接更改图像的来源。但是，有几种不同的方法可以创建适合您需求的简单图像翻转：

1：如果您将图像包装在一个 div 中，然后让图像在悬停时消失并显示背景图像，则可以做到这一点：

HTML：

    <div class="image">  
    <img src="http://placehold.it/250/ffffff/000000">  
    </div>

CSS：

.image {  
    width: 250px;   
height: 250px;  
    background: url('http://placehold.it/250/000000/ffffff');  
}  
.image:hover img {
    display: none;
}

2：如果背景方法可行，那么仅交换背景图像可能是一种解决方案：

HTML：

<div class="image"></div>

CSS：

.image {
width: 250px; 
height: 250px;
background: url('http://placehold.it/250/000000/ffffff');
}  
.image:hover {
background: url('http://placehold.it/250/000000/ffffff');   
http://placehold.it/250/ffffff/000000
}

3：如果你坚持直接改变图片的来源，我建议研究一个简单的JavaScript方法：

HTML：

<img src="http://placehold.it/250/ffffff/000000" onmouseover="hover(this);" onmouseout="unhover(this);">

JS：

function hover(element) {
element.setAttribute('src', 'http://placehold.it/250/000000/ffffff');
}  
function unhover(element) {
element.setAttribute('src', 'http://placehold.it/250/ffffff/000000');
}

【讨论】：