Question

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

我想要更改的图片位于我的网页的body：

<body>

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

我希望此图片例如，当您将鼠标悬停在anotherImage.jpg上时更改为新图片myImage.jpg。我试图在其他地方找到帮助，但没有成功。

Answer 1

您可以使用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过渡一起使用，因为它们不是可动画的属性，但不透明度是可动画的，因此您可以创建此类过渡！祝你好运！

如果您不理解我的解释，请随时要求澄清！

Answer 2

如果您可以将这两个图片添加到$(document).ready ( function(){ var links = [ 'swfs/CP.swf', 'swfs/2cats.swf', /* there is no limit to the array length */ 'swfs/4ChanBrightside.swf', 'swfs/4chancity.swf', 'swfs/2spooky4u.swf', 'swfs/4channer.swf', 'swfs/5_mile_walk.swf' /* no trailing comma after final item */ ]; var displaytext = [ 'CP', '2cats', 'f4ChanBrightside', '4chancity', '2spooky4u', '4channer', '5_mile_walk' /* no trailing comma after final item */ ]; var c = 0 var flashmovie, test, temp; function init() { flashmovie = document.getElementById('flashmovie'); document.getElementById('back').onclick = function () { if (c == 0) { c = links.length; } c-- displayFiles(); } document.getElementById('next').onclick = function () { if (c == links.length - 1) { c = -1; } c++; displayFiles(); } document.getElementById('rand').onclick = function () { temp = c; while (c == temp) { c = Math.floor(Math.random() * links.length); } displayFiles(); } } function displayFiles() { test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length); document.getElementById('title').innerHTML = displaytext[c]; flashmovie.innerHTML = '<object type="application/x-shockwave-flash" data="' + links[c] + '">' + '<param name="movie" value="' + links[c] + '">' + '<\/object>'; } window.addEventListener ? window.addEventListener('load', init, false) : window.attachEvent('onload', init); });标记中，则可以执行以下操作：

<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");
}

有关基本淡入/淡出效果的示例，请参阅此 jsFiddle 。

Answer 3

在CSS中，第一个类包含第一个图像。然后第二个类将是类名+悬停。 EX。 .CLASSNAME：hover {}

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

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

如何进行图像鼠标悬停效果？

3 个答案: