Html 如何在使用两张图片悬停后使图像居中_Html_Css

Html 如何在使用两张图片悬停后使图像居中

html css

Html 如何在使用两张图片悬停后使图像居中,html,css,Html,Css,您好，悬停后我需要在css中将图像居中，但两张图片（原始图片和居中图片）都需要可见。以下是我当前的代码： HTML <head> <link rel="stylesheet" type="text/css" href="stajl.css"> </head> <body> <div> <img src="smile.jpeg"> </div> </body> 谢谢各位朋友，这

您好，悬停后我需要在css中将图像居中，但两张图片（原始图片和居中图片）都需要可见。以下是我当前的代码：

HTML

<head>
 <link rel="stylesheet" type="text/css" href="stajl.css"> 
</head>
<body> 
  <div>
    <img src="smile.jpeg">
  </div>
</body>

谢谢各位朋友，这将以JS为例，请记住，这段JS代码只是一个非常快速的示例，我将在稍后对其进行优化，我们可以缓存img源代码，并使用带有参数的函数来避免重复代码等。但它可以工作，并且是简单的JS和kep，尽可能简单，便于解释

document.getElementById("left").addEventListener('mouseover', function(){
var placeholder = document.getElementById("imageHolder");

placeholder.style.background =  "url(http://lorempixel.com/400/200/nightlife)";
placeholder.style.opacity = 1;

}))

这将侦听图像上的鼠标悬停事件，并在悬停时获取占位符div，并将悬停的img的url值作为占位符div的背景。动画通过使用过渡更改CSS不透明度来实现

指向钢笔的链接：

请向我们展示您迄今为止所做的工作..HTML:CSS:div:hover{text align:center}现在您需要澄清这两张图片的含义，因为页面上只有一张图片，CSS中没有引用。这两张图片我的意思是，当我将鼠标悬停在图片上时，它的居中版本将出现在屏幕的中心，而我悬停在上面的图片将不会消失。像悬停缩放功能。另一个图像在哪里？可以用CSS完成吗？这是为了我的学校项目，老师说必须用CSS完成。无论如何，谢谢你。我也做了一些研究，我需要一些类似lightbox的东西，但需要CSS和悬停效果。我已经做了这些，我只需要在悬停后使用效果，而不是单击。使用CSS，你只能看到一张图片，没有CSS，想不出一种方法来处理多张图片，除非使用一种非常详细的方法。你可以设置2个背景相同但不透明度值为0和1的div，然后悬停时，将隐藏div的不透明度设置为1。但是JS是最好的方法。我的示例是悬停，除非你在移动设备上。一张图像就可以了

document.getElementById("left").addEventListener('mouseover', function(){
var placeholder = document.getElementById("imageHolder");

placeholder.style.background =  "url(http://lorempixel.com/400/200/nightlife)";
placeholder.style.opacity = 1;