Question

你好我需要在悬停后将图像置于css中心，但两张图片（原始图像和居中图片）都需要可见。这是我目前的代码：

HTML

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

CSS

div:hover { 
  text-align:center 
}

谢谢伙伴

Answer 1

这将需要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不透明度来进行动画。

链接到笔：

http://codepen.io/damianocel/pen/NrPrEL

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

1 个答案: