如何做图像鼠标悬停效果？

当我将鼠标悬停在当前图像上时，如何更改我的代码以允许它更改图像？如何做图像鼠标悬停效果？

我想改变形象坐在我的网页的body：

<body> 

<!-- Here's myImage!--> 
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">

，我想这个形象的比方，当你将鼠标悬停在myImage.jpg改变以全新的形象，anotherImage.jpg。我试图在其他地方找到帮助，但没有成功。

来源

2016-04-02 toadflax

您可以使用javascript的onmouseover事件，但在可能的情况下最好使用CSS。

下面是一个可能的解决方案演示：(Edit on Codepen)

* { 
 
    box-sizing: border-box; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.container { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 400px; 
 
    margin-left: 50px; 
 
} 
 
.container:hover img:nth-of-type(2) { 
 
    opacity: 1; 
 
} 
 
.container img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 600px; 
 
    height: 400px; 
 
    transition: opacity 1s ease-in-out 0s; 
 
} 
 
.container img:nth-of-type(1) { 
 
    opacity: 1; 
 
} 
 
.container img:nth-of-type(2) { 
 
    opacity: 0; 
 
}

<div class="container"> 
 
    <img src="https://placeimg.com/600/400/animals" /> 
 
    <img src="https://placeimg.com/600/400/people" /> 
 
</div>

基本上，在此工作原理是，将两个图像是由通过CSS相同的大小，并且放置方式彼此之上（这就是绝对定位）。当用户没有悬停在其上时，第二个图像的不透明度为0（nth-of-type(2)选择器选择该类型的第二个元素），因此它不可见，并且第一个图像的不透明度为1，所以它是可见。当用户悬停在它上面时，第二个被赋予1的不透明度，所以它变得完全可见，并且因为它们都是相同的大小并且在彼此之上，所以第一个被第二个覆盖。这意味着当您将鼠标悬停在图像上时，图像会发生变化。

这样做的另一个好处是，正如您在演示中看到的那样，它是完全可动的！其他解决方案（如使用display: none或背景图像）不能与CSS转换一起使用，因为它们不是可动画属性，但不透明度是可以动画的，因此您可以创建像这样的转换！祝你好运！

如果您不明白我的解释如何工作，请随时要求澄清！

来源

2016-04-03 00:08:31

这很好用，谢谢！我虽然有一个小问题，你知道为什么当我试图编辑图像的位置（通过填充，顶部，左侧等），他们不动吗？目前他们在左上角，但我需要移动他们，但是这样做有轻微问题。 – toadflax

您需要移动整个div.content才能移动，移动单个图像时请停止使用XP。那对你有用吗？ **编辑：我已经编辑了上面的演示，告诉你如何移动它！** –

这个工作完美，谢谢！只是一个简短的问题，是否有可能移动**在**中淡出的图像？即**之后的图像**您在鼠标悬停前看到的图像。 – toadflax

在你的CSS中，让第一个类包含第一个图像。然后第二课将成为课程名称+悬停。 EX。 .CLASSNAME：悬停{}

#NAME { 
    background-image: url('LibraryTransparent.png'); 
    height: 70px; 
    width: 120px; 
} 

#NAME:hover { 
    background-image: url('LibraryHoverTrans.png'); 
}

来源

2016-04-02 23:46:21 DolbyOver

虽然这在技术上有效，但它对于语义来说可能并不总是很好...背景图像不是内容，它们是样式，而实际图像是实际内容的一部分。 XP –

如果你可以添加两个图像到<span>标签左右，你可以这样做：

span img:last-child { 
 
    display: none; 
 
} 
 
span:hover img:first-child { 
 
    display: none; 
 
} 
 
span:hover img:last-child { 
 
    display: inline-block; 
 
}

<span> 
 
    <img src="http://lorempixel.com/300/150/sports/1"> 
 
    <img src="http://lorempixel.com/300/150/sports/2"> 
 
</span>

或者，使用伪元素为第二个图像。

span:hover img { 
 
    display: none; 
 
} 
 
span:hover:after { 
 
    content: url("http://lorempixel.com/300/150/sports/2"); 
 
}

<span> 
 
    <img src="http://lorempixel.com/300/150/sports/1"> 
 
</span>

用于进/出效果的一些基本的褪色例如见本jsFiddle。

来源

2016-04-03 00:01:51 Stickers

+1为伪元素示例！这是一个聪明的用法！虽然这确实意味着图像只在悬停时才加载？我想，它可以被重新调整，使其加载页面的其余部分的图像？这可能会更好，因此慢速连接的人不必在加载时受到阻碍。伪元素的想法虽然巧妙！ xP –

谢谢，它只在第二种方法中悬停加载。但可以根据需要进行修改。只是提出一些想法，并希望保持简单的例子。 – Stickers

如何做图像鼠标悬停效果？

回答

相关问题