如何在悬停在新div上时打开图像？
[英]How can I open an image in new div when hovering over it?
问题描述
<html> <head> <style type="text/css"> .a1:hover{ width:300; height:400; } .a2{ width:90%; height:400px; float:right; border:5px solid red; } </style> </head> <body> <div class=a2></div> <div><img src="image1.jpg" width=100 height=100 class=a1 ></div> <div><img src="image2.jpg" width=100 height=100 class=a1></div> <div><img src="image3.jpg" width=100 height=100 class=a1 ></div> <div><img src="image3.jpg" width=100 height=100 class=a1></div> </body> </html>
I have four images,each one in a separate div.When hovering over one image, I need it to open in a new div with larger size (Keeping the first image as is) and i want to display some text under the new image that appears after hovering. 
我有四个图像，每个图像在一个单独的div中。当鼠标悬停在一个图像上时，我需要它在一个更大尺寸的新div中打开（保持第一个图像不变）并且我想在新图像下显示一些文本悬停后出现。 I've tried this but it seems that when hovering over the first image it got bigger but doesn't open in the targeted div. 我试过这个但是看起来当它悬停在第一张图像上时它变得更大但是没有在目标div中打开。 What can I do? 我能做什么？
3 个解决方案
解决方案1
4 2015-11-23 18:56:55
You won't necessarily need Javascript for this. 你不一定需要Javascript。 The code snippet below displays a larger version of the image when hovered while keeping the original image as is. 下面的代码片段在悬停时显示较大版本的图像，同时保持原始图像不变。
.a1:hover{ width:300; height:400; } .small-image { width: 100px; height: auto; } .small-image:hover + .large-image { visibility: visible; } .large-image { visibility: hidden; width: 200px; height: auto; }
<html> <head> </head> <body> <div><img src="https://cdn1.iconfinder.com/data/icons/simple-icons/4096/stackoverflow-4096-black.png" class="small-image"> <img src="https://cdn1.iconfinder.com/data/icons/simple-icons/4096/stackoverflow-4096-black.png" class="large-image"> </div> </body> </html>
解决方案2
2 2015-11-23 18:59:38
Is this the sort of thing you wanted? 这是你想要的那种吗？ You'll see I used a little bit of JS. 你会看到我使用了一点JS。
var thumbSelect = document.querySelectorAll('.thumb'), windowSelect = document.querySelector('.window'), thumbCount; for (thumbCount = 0; thumbCount < thumbSelect.length; thumbCount++) { thumbSelect[thumbCount].onmouseover = function() { windowSelect.src = this.src; }; };
.thumb { opacity: 0.8; } .thumb:hover { opacity: 1; } .a2 { width:calc(100% - 115px); height:300px; float:right; border:5px solid red; }
<div class=a2> <img src="" width=300 height=300 class="window"> </div> <div> <img src="http://www.canbypublications.com/sihanoukville-cambodia/sihanoukville-page-images/ph-beach-independ.jpg" width=100 height=100 class="thumb"> </div> <div> <img src="https://scdn3.thomascook.com/crop?imageUrl=http://magnolia.production.thomascook.io/wcms/dam/tcuk/holidays/bulgaria/sunny-beach-in-BULGARIA.jpg&maxWidth=300&maxHeight=0" width=100 height=100 class="thumb"> </div> <div> <img src="http://www.targetwoman.com/image/myrtle-beach-resort.jpg" width=100 height=100 class="thumb"> </div> <div> <img src="http://www.st-maarten-island-guide.com/wp-content/uploads/2012/03/St-Martin-Beach-Le-Gallion-300x300.jpg" width=100 height=100 class="thumb"> </div>
http://jsfiddle.net/link2twenty/bcxz1gnc/ http://jsfiddle.net/link2twenty/bcxz1gnc/
解决方案3
0 2015-11-23 21:06:31
I've got your point. 我明白了你的意思。 You need to do it in JavaScript way. 您需要以JavaScript方式执行此操作。 You should get smaller images src attribute in an array and then on hover give each of these src to your desired image. 您应该在数组中获得较小的图像src属性 ，然后在悬停时将每个 src分配给您想要的图像。 In this way you don't need to change your markup. 这样您就不需要更改标记了。
$(".smallerImagesContainer img").each(function() { // mouseenter is hover for JQuery, mouseleave is like UnHover also $(this).on("mouseenter", function() { var smallerImagesSrc = $(this).attr("src"); // Below line is where we replace Src $(".biggerImageContainer img").attr("src", smallerImagesSrc); // Just for checking!, Delete it later console.log(smallerImagesSrc + " replaced"); alert(smallerImagesSrc + " replaced"); }); });
.biggerImageContainer {background-color: blue} .biggerImageContainer > img {width: 100%; min-height: 250px; border: 2px solid gray;} .smallerImagesContainer > img {width: 30%; min-height: 50px; border: 2px solid gray;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="biggerImageContainer"> <img src="" alt=""> </div> <div class="smallerImagesContainer"> <img src="image1.jpg" alt="image1"> <img src="image2.jpg" alt="image2"> <img src="image3.jpg" alt="image3"> </div>
JSFiddle: http://jsfiddle.net/pooria_h/rcpcbq7e/ JSFiddle： http ： //jsfiddle.net/pooria_h/rcpcbq7e/
Don't forget to: 别忘了：
- Execute function after window loads. 窗口加载后执行功能。 For suggestion put your code inside
$(window).load(function() { })建议把你的代码放在$(window).load(function() { }) - Hover in JavaScript is an event and
mouseenteris JQuery keyword for hover.悬停在JavaScript中是一个事件， mouseenter是悬停的JQuery关键字。 You can usemouseleaveif you want to do else when mouse pointer is out.如果你想在鼠标指针不在时做其他事情，你可以使用mouseleave。 - JQuery
attrin this way returns a relative link, if you want an absolute link you should usepropinstead.JQuery attr以这种方式返回一个相对链接，如果你想要一个绝对链接，你应该使用prop。
Update: I've noticed you didn't tagged Javascript in your question. 更新：我注意到你没有在你的问题中标记Javascript。 In this case Answer 1 is what you need to do. 在这种情况下，答案1是您需要做的。 But of course you should change your markup. 但是你当然应该改变你的标记。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.