如何通过悬停在链接上在特定位置显示图像？ (HTML/CSS3)
[英]How to appear an Image in specific location through hover on link? (HTML/CSS3)
问题描述
How can I make an image appear in a specific place (ex. customized image box) through hovering a link.
如何通过悬停链接使图像出现在特定位置（例如自定义图像框）。 Here is my code, but it is not working the way I want.这是我的代码，但它没有按我想要的方式工作。
<!DOCTYPE html>
<html>
<style>
a {
display: block;
padding-bottom: 20px;
}
a #link1:hover{
content: url("winter.jpg");
}
a #link2:hover{
content: url("sunset.jpg");
}
a #link3:hover{
content: url("Blue hills.jpg");
}
</style>
<body>
<a href=""><div id="link1">Link1</div></a>
<a href=""><div id="link2">Link2</div></a>
<a href=""><div id="link3">Link3</div></a>
</body>
</html>
Here is an illustration for easy realization of my idea:这是一个易于实现我的想法的插图：
3 个解决方案
解决方案1
0 2016-10-17 14:35:49
Try to google this first.首先尝试谷歌这个。 Should be able to find pretty easy.应该很容易找到。 But it should be something like this.但它应该是这样的。
HTML HTML
<img class="1" src="winter.jpg">
<img class="2" src="sunset.jpg">
<img class="3" src="Blue Hills.jpg">
CSS CSS
.1 .2 .3{
-code the position here-
display: none;
}
jQuery jQuery
$(document).ready(function(){
$("#link1").mouseenter(function(){
$("1").show();
});
$("#link2").mouseenter(function(){
$("2").show();
});
$("#link3").mouseenter(function(){
$("3").show();
});
});
解决方案2
0 2016-10-17 14:56:21
Ok there are several approaches to this but the first one that comes to mind is create an array of your image paths.好的，有几种方法可以解决这个问题，但第一个想到的是创建一个图像路径数组。 Then (a little longwinded but) if you just want something to work straight away you could try just putting a function on each links hover state to change the image path of the current image in that custom div you show.然后（有点啰嗦，但是）如果您只想立即开始工作，您可以尝试在每个链接悬停状态上放置一个函数，以更改您显示的自定义 div 中当前图像的图像路径。 Something like this:像这样的东西：
<style>
.customBox{
height: 300px;
width: 300px;
}
.customBox img{
max-height: 300px;
max-width: 300px;
}
</style>
<a href=""><div id="link1">Link1</div></a>
<a href=""><div id="link2">Link2</div></a>
<a href=""><div id="link3">Link3</div></a>
<div class="customBox"><img src=""></div>
<script>
var images = ['https://newevolutiondesigns.com/images/freebies/winter-wallpaper-12.jpg','https://upload.wikimedia.org/wikipedia/commons/a/a4/Anatomy_of_a_Sunset-2.jpg','http://www.hotel-r.net/im/hotel/asia/in/blue-hills-0.jpg'];
$('#link1').hover(function(){
$('.customBox img').attr('src', images[0]);
});
$('#link2').hover(function(){
$('.customBox img').attr('src', images[1]);
})
$('#link3').hover(function(){
$('.customBox img').attr('src', images[2]);
})
</script>
http://codepen.io/tomdreamevil/pen/XjPoVp?editors=1111
解决方案3
0 2016-10-17 14:58:33
You can do it with JavaScript ...你可以用 JavaScript 做到这一点......
window.addEventListener("load", hoverChangeImageEffect); function hoverChangeImageEffect() { var imageHolder = document.getElementById("imageHolder"); var links = document.getElementsByClassName("setImage"); for(var i=0; i<links.length; i++) hoverChangeImage(links[i]); function hoverChangeImage(link) { link.onmouseover = function linkHover() { imageHolder.src = link.getAttribute("image"); } } }
img.imageHolder { width: 30%; vertical-align: middle; border: 1px solid black; margin-left: 2em; } ul.links { float: left; display: inline-block; }
<p>Hover the mouse over the links:</p> <ul class="links"> <li><a href="" class="setImage" image="http://cdn.sstatic.net/clc/img/jobs/ico-dismiss.svg">Anchor text1</a></li> <li><a href="" class="setImage" image="http://cdn.sstatic.net/clc/img/jobs/ico-location-gray.svg">Anchor text2</a></li> <li><a href="" class="setImage" image="http://cdn.sstatic.net/clc/img/jobs/ico-visa-pink.svg">Anchor text3</a></li> </ul> <img id="imageHolder" class="imageHolder" src="" height="100">
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.