弹出图像html

Question

我正在开发一个镀铬扩展，在任何鼠标悬停在图像上时，它应该在图像上弹出一个框，图像​​应该缩放到原始图像的1.5倍。 所以我开始研究示例并找到了类似的例子。

＆＃13;

＆＃13;

.zoomin img {
  height: 200px;
  width: 200px;
  -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -ms-transition: all 2s ease;
  transition: all 2s ease;
}
.zoomin img:hover {
  width: 300px;
  height: 300px;
}

＆＃13;

<div class="zoomin">
  <img src="http://www.corelangs.com/css/box/img/zimage.png" title="All you need to know about CSS Transitions " />
</div>

＆＃13;

＆＃13;

＆＃13;

但我需要在悬停时不创建图像而不缩放图像。所以在我使用这个Using only CSS, show div on hover over <a>的练习中，我已经开发了这个。

main.js

div {
    display: none;
}

img:hover + div {
    display: block;
 height : 200px;
    width : 300px;
}

但问题是应根据我们悬停的图像动态调整图像的大小。

当我们将鼠标悬停在图像上时，是否有办法使其工作，它应该自动生成一个div，该div应该保持图像尺寸的1.5倍。任何建议。请帮忙

我在下面列出了截图供参考。

Answer 1

localhost

Answer 2

您只需删除

即可

  

+

因为它会立即选择下一个div元素到img。

我猜你应该试试：

img:hover ~ div
{
//your height and width goes here
}

Answer 3

我认为这是你想要的那种。

我不认为你只能用CSS做这件事（虽然喜欢错了）

我已经完成了一个for循环，可以在.zoomin中鼠标移开和关闭图像时添加事件监听器。然后它相应地设置图像源。

＆＃13;

＆＃13;

var zoominSel = document.querySelectorAll(".zoomin img");
var zoomContSel = document.querySelector(".zoomcont img")

for (let i = 0; i < zoominSel.length; i++) {
  zoominSel[i].addEventListener("mouseover", function(event) {
    zoomContSel.setAttribute('src', event.target.getAttribute('src'));
    zoomContSel.style.width = event.target.offsetWidth + "px";
    zoomContSel.style.height = event.target.offsetHeight + "px";
    zoomContSel.parentElement.style.top = event.target.offsetTop + "px";
    zoomContSel.parentElement.style.left = (event.target.offsetLeft + event.target.offsetWidth + 2) + "px";
  });
  zoominSel[i].addEventListener("mouseout", function(event) {
    zoomContSel.setAttribute('src', '');
  });
}

＆＃13;

body {
  margin: 0;
}
.zoomin img {
  max-width: 200px;
}
.zoomcont img[src=""] {
  display: none;
}
.zoomcont {
  z-index: 1000;
  position: absolute;
  transform: scale(1.5);
  transform-origin: 0 0;
}

＆＃13;

<div class="zoomin">
  <img src="http://www.corelangs.com/css/box/img/zimage.png" />
</div>
<div class="zoomin">
  <img src="http://usabilitygeek.com/wp-content/uploads/2013/07/free-fonts-for-commercial-personal-use.jpg" />
</div>


<div class="zoomcont">
  <img src="" />
</div>

＆＃13;

＆＃13;

＆＃13;

希望您觉得这很有帮助。