弹出图像html

Question

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

.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; 
 
}

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

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

main.js 

div { 
    display: none; 
} 

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

但问题是，应根据我们徘徊的图像动态调整图像的大小。

有没有一种方法，当我们将鼠标悬停在图像就会自动使这应该持有一个div，使这项工作的1.5倍，image.Any suggestions.?Please的尺寸帮助

我已经包括了屏幕截图以下供参考。

Answer 1

img:hover div { 
     display: block; 
var img = document.getElementById('imageid'); 
// get the image dimensions using this id 
var width1 = img.clientWidth; 
var height1 = img.clientHeight; 
     height : width * 1.5; 
     width : height * 1.5; 
    } 

Answer 2

你需要只是删除

+

，因为它选择直接下div元素img。

我想你应该尝试：

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

Answer 3

我觉得这是诸如此类的事情，你想要的。

我不认为你可以只用CSS做到这一点（虽然很想是错误的）

我做了一个for循环来在添加事件侦听器，因为当你鼠标和关闭图像在.zoomin。然后它相应地设置图像源。

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', ''); 
 
    }); 
 
}

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

<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>

希望对您有所帮助。