如何通過懸停在鏈接上在特定位置顯示圖像？ (HTML/CSS3)

Question

如何通過懸停鏈接使圖像出現在特定位置（例如自定義圖像框）。 這是我的代碼，但它沒有按我想要的方式工作。

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

這是一個易於實現我的想法的插圖：

圖片說明

Answer 1

首先嘗試谷歌這個。 應該很容易找到。 但它應該是這樣的。

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

Answer 2

好的，有幾種方法可以解決這個問題，但第一個想到的是創建一個圖像路徑數組。 然后（有點啰嗦，但是）如果您只想立即開始工作，您可以嘗試在每個鏈接懸停狀態上放置一個函數，以更改您顯示的自定義 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

Answer 3

你可以用 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">

如何通過懸停在鏈接上在特定位置顯示圖像？ (HTML/CSS3)

問題描述

3 個解決方案

解決方案1
0 2016-10-17 14:35:49

HTML

CSS

jQuery

解決方案2
0 2016-10-17 14:56:21

解決方案3
0 2016-10-17 14:58:33

如何通過懸停在鏈接上在特定位置顯示圖像？ (HTML/CSS3)

問題描述

3 個解決方案

解決方案1 0 2016-10-17 14:35:49

HTML

CSS

jQuery

解決方案2 0 2016-10-17 14:56:21

解決方案3 0 2016-10-17 14:58:33

解決方案1
0 2016-10-17 14:35:49

解決方案2
0 2016-10-17 14:56:21

解決方案3
0 2016-10-17 14:58:33