圖像懸停以顯示鏈接

所以我有一個div，將包括圖像http://www.reversl.net/hovers/，我希望圖像顯示兩個鏈接時，像這裏所示的佈局懸停http://www.reversl.net/demo/是否有可能實現這隻使用CSS？圖像懸停以顯示鏈接

來源

2012-03-30 Jedda

的另一種方式，你可以用顯示器做：無/塊

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

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

來源

2012-03-30 13:56:28

請編輯以前的答案，而不是發佈新的答案。 – kappa 2012-03-30 14:03:23

感謝熊貓34。幾乎正是我在找什麼。唯一的事情是...圖像現在溢出了div。我怎麼能解決這個問題？ http://www.reversl.net/hovers/ – Jedda 2012-03-30 15:00:28

如果你已經設置了你的容器（div.image），使用它來代替我的div.container，我只是提供它作爲例子。所以，它溢出你的div，因爲它有不同的寬度，擺脫它。 – 2012-03-30 15:15:56

您可以創建鏈接，並在CSS股利：

div.myimage div.links { display:none;} 
div.myimage:hover div.links { display:block;}

樣本HTML：

<div class="myimage"> 
    <div class="links"> we are the links</div> 
    <img src="animage.png" /> 
</div>

很明顯，如果你想將鼠標懸停在您必須設置自己的div定位

來源

2012-03-30 13:23:12 kappa

謝謝。我已經添加了你的建議。是否有可能讓圖像在鏈接顯示時不會被推下去。即如何將圖像上的鏈接浮起來？ – Jedda 2012-03-30 13:44:00

爲了獲得您必須在相對定位的容器（div）內使用元素的絕對定位。這樣，元件內部的位置將相對於容器;那麼你必須設置不同的z索引元素，更大的鏈接div和更低的圖像。搜索一些定位教程，以更好地學習它 – kappa 2012-03-30 14:02:45

感謝您的提示！ – Jedda 2012-03-30 14:54:41

僅供參考：

div.container { width: 200px; height: 200px; position: relative; } 
div.container img { width: 100%; height: 100%; position: absolute; top: 0; } 
div.container img:hover { z-index: -1; } 
div.container div { width: 100%; position: absolute; top: 0; } 
div.container div:hover { z-index: 1; }

（最後一個需要懸停在鏈接時消除閃爍）

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

來源

2012-03-30 13:44:20

你總是可以使用「不透明度」。

您的標記將是這樣的：

<div class="wrapper"> 
    <img src="example.png" alt="example" /> 
    <ul class="links"> 
    <li><a href="">Example Link</a></li> 
    <li><a href="">Example Link</a></li> 
    </ul> 
    </div>

然後在CSS：

.wrapper { 
    position: relative; /*so the absolute positioning works */ 
    } 

.links { 
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; /*hidden by default */ 
    width: 100%; 
    height: 25px; /*making this up */ 
    } 

    .wrapper:hover .links, .wrapper:focus .links { 
    opacity: 1; /*visible on hover */ 
    }

一個警告夫婦這種技術：

你需要使用一個opacity filter對於IE8及以下版本，因爲他們不理解不透明CSS屬性
我不會推薦這種導航技術，因爲你似乎打算這麼做。觸控設備上的用戶（智能手機和平板電腦）實際上並沒有「懸停」狀態依賴。

如果你想要一些積分，但是，對於現代瀏覽器的用戶，補充一點：

.links { 
    -webkit-transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    transition: all .3s ease; 
    }

和鏈接不會在「褪色」 - 所有的CSS。

來源

2012-03-30 14:21:57 chipcullen

這也適用。對於支持它的瀏覽器來說，轉換是一個不錯的補充。謝謝！ – Jedda 2012-03-30 14:56:38

另外，感謝您的提示重新：觸摸設備;-) – Jedda 2012-03-30 15:02:56

圖像懸停以顯示鏈接

回答

相關問題