懸停鏈接將出現在圖像

我想我的鏈接將出現在圖像的中心，如果圖像懸停。如何做到這一點？我更喜歡使用純CSS，但如果需要jQuery是沒有問題的。懸停鏈接將出現在圖像

<div class="container"> 
<img src="an_img.jpg"> 
<div> <a href="a link">i want this link on center</a> </div> 
</div>

CSS：

<style> 

    div.container { width: 200px; height: 200px; position: relative; } 
    div.container img { width: 100%; height: 100%; position: absolute; top: 0; } 
    div.container div { width: 100%; position: absolute; top: 0; display: none; } 
    div.container img:hover + div { display: block; } 
    div.container div:hover { display: block; } 
</style>

就像這樣： http://jsfiddle.net/gye6f9yh/

但我想在圖像的中心垂直和水平。

來源

2015-02-06 Muhammad Dyas Yaskur

[圖像懸停以顯示鏈接（http://stackoverflow.com/questions/9943818/image-hover-to-reveal-links）的可能重複 – Ancient 2015-02-06 10:07:20

哪個鏈路應該出現，「產品名稱」？ – 2015-02-06 10:08:45

@古代我編輯，我想喜歡它，但鏈接是在圖像的中心 – 2015-02-06 10:26:24

這應該有幫助！ result

.container{ 
 
    position:relative; 
 
    } 
 
    .container div { 
 
    display:none; 
 
    border:solid ; 
 
    } 
 
    .container img:hover + div{ 
 
    display:block; 
 
    position:absolute; 
 
     left:11%; 
 
     top:45%; 
 
    }

<div class="container" style="width: 202px;"> 
 
<img src="an_img.jpg" style="width: 202px;background-color:green"> 
 
<div> <a href="a link" style="color:red;">i want this link on center</a> </div> 
 
</div>

來源

2015-02-06 10:47:32 Joseph

您可以使用:hover屬性使鏈接可見。

首先使鏈接在CSS無形：

.product a { 
    display: none; 
}

然後使其再次可見，當你在它懸停：

.product:hover a { 
    display: block; 
}

來源

2015-02-06 10:10:08 Jorrex

我已經使用它 – 2015-02-06 10:27:01

使用HTML映射標籤

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> 
 

 
<map name="planetmap"> 
 
    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun"> 
 
    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"> 
 
    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"> 
 
</map>

來源

2015-02-06 10:11:27

我不知道用這個，我試過但不起作用 – 2015-02-06 10:28:09

請檢查一次。

 .container { width: 200px; height: 200px; position: relative; white-space: nowrap; text-align: center; } 
 
     .container img { width: 100%; height: 100%; position: absolute; top: 0;left: 0; } 
 
div.container:after{ 
 
    display: inline-block; 
 
    content: ''; 
 
    height: 200px; 
 
    vertical-align: middle; 
 
    margin-right: -0.25em; 
 
    width:1px; 
 
    overflow:hidden; 
 
} 
 
.centered{ 
 
    vertical-align:middle; 
 
    display:none; 
 
    white-space:normal; 
 
} 
 
div.container:hover .centered{display: inline-block;}

<div class="container"> 
 
    <img src="an_img.jpg"> 
 
    <div class="centered"> <a href="#">A link should be center</a> </div> 
 
</div>

來源

2015-02-06 10:54:08 Kumar

懸停鏈接將出現在圖像

回答

相關問題