Fatal编程技术网
  • javascript/
  • Javascript 如何实现图像鼠标悬停效果？

Javascript 如何实现图像鼠标悬停效果？

javascript html css

Javascript 如何实现图像鼠标悬停效果？,javascript,html,css,Javascript,Html,Css,当我将鼠标悬停在当前图像上时，如何更改代码以允许其更改图像 我希望更改的图像位于我的网页的正文中： <body> <!-- Here's myImage!--> <img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;"> 例如，我想要这个图像，当您将鼠标悬停在myImage.jpg上时，它会变

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

我希望更改的图像位于我的网页的
正文中
：

<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
。我试图在其他地方找到帮助，但没有成功。

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

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

#NAME:hover {
   background-image: url('LibraryHoverTrans.png');
}
如果可以将两个图像添加到
标记中，则可以执行以下操作：

span img:最后一个孩子{
显示：无；
}
span:悬停img:第一个孩子{
显示：无；
}
span:悬停img:最后一个孩子{
显示：内联块；
}
您可以使用javascript的
onmouseover
事件，但最好尽可能使用CSS

下面是一个可能解决方案的演示：

*{
框大小：边框框；
填充：0；
保证金：0；
}
.集装箱{
位置：相对位置；
宽度：600px；
高度：400px；
左边距：50像素；
}
.容器：悬停图像：第n个类型（2）{
不透明度：1；
}
.集装箱img{
位置：绝对位置；
排名：0；
左：0；
宽度：600px；
高度：400px；
过渡：不透明度1秒，缓进缓出0秒；
}
.集装箱img：第n种类型（1）{
不透明度：1；
}
.集装箱img：第n种类型（2）{
不透明度：0；
}
虽然这在技术上可行，但在语义上可能并不总是很好。。。背景图像不是内容，而是样式，而实际图像是实际内容的一部分。这很好用，谢谢！我有一个小问题，但是，你知道为什么出于某种原因，当我试图编辑图像的位置（通过填充，顶部，左侧等），他们不移动吗？目前它们位于左上角，但是我需要移动它们，但在移动过程中遇到了一些小问题。您需要移动整个div.content才能移动它，因为使用移动单个图像会使其停止工作。这对你有用吗？编辑：我已经编辑了上面的演示，告诉你如何移动它！这工作做得很好，谢谢！只是一个简单的问题，是否可以移动淡入的图像？i、 在鼠标悬停前看到的图片后面的图片。很抱歉回复太晚；什么意思？如果您使用第n个类型（n）选择器，您可以选择您想要的一个，并且您可以在它们上使用
左
、
右
、
上
和
下
属性，如果这是您的意思……不用担心，我能够修复它，但忘了如何修复它，但是我要感谢你，伪元素的例子是+1！这是对它的巧妙运用！。虽然这确实意味着图像仅加载到悬停右侧？我想，可以对它进行重组，使其与页面的其余部分一起加载图像吗？这可能会更好，这样连接速度较慢的用户就不必在加载时受到它的阻碍。虽然伪元素的想法很巧妙！谢谢，它只在第二种方法中加载到hover上。但它可以根据需要进行修改。只是想提出一些想法，并希望示例保持简单。