Question

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

#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" />

Answer 1

当鼠标悬停在徽标上时，您必须使用背景图片来更改徽标。不要在html中使用img标签来设置第一个log img。

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

另外，我不是内容，而是使用背景，如此

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

和你的#logo相同：悬停

Answer 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。这使您的代码更易于回收。

Answer 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" />

Answer 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');
}

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

4 个答案: