如何通过悬停链接在特定位置显示图像？ （HTML / CSS3）

时间：2016-10-17 14:27:03

标签： javascript jquery html css css3

如何通过悬停链接使图像显示在特定位置（例如自定义图像框）。这是我的代码，但它不按我想要的方式工作。 

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

以下是一个易于实现我的想法的插图：

image description

3 个答案:

答案 0 :(得分：0)

首先尝试google。应该能找到相当容易的。但它应该是这样的。

HTML 

<img class="1" src="winter.jpg">
<img class="2" src="sunset.jpg">
<img class="3" src="Blue Hills.jpg">

CSS 

.1 .2 .3{
     -code the position here-
     display: none;
}

的jQuery 

$(document).ready(function(){
    $("#link1").mouseenter(function(){
        $("1").show();
    });
    $("#link2").mouseenter(function(){
        $("2").show();
    });
    $("#link3").mouseenter(function(){
        $("3").show();
    });
});

答案 1 :(得分：0)

好的有几种方法，但第一个想到的是创建一个图像路径数组。然后（有点长）但如果你只是想要一些东西直接工作，你可以尝试在每个链接悬停状态上放置一个函数来改变你显示的自定义div中当前图像的图像路径。像这样：

<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

答案 2 :(得分：0)

你可以用JavaScript做到这一点......

＆＃13;
＆＃13; 
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");
			}
		}
	}
＆＃13; 
img.imageHolder {
  width: 30%;
  vertical-align: middle;
  border: 1px solid black;
  margin-left: 2em;
}

ul.links {
  float: left;
  display: inline-block;
}
＆＃13; 
<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">
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题