鏈接區域要麼太小，要麼隱藏圖像中的隱藏div

我的網站頂部有一個菜單欄。點擊「社交」鏈接會顯示一個隱藏的div，其中包含一排水平的社交圖標圖像。我現在試圖讓這些圖像鏈接到各個網站，並在智慧的結尾。鏈接區域要麼太小，要麼隱藏圖像中的隱藏div

如果我只是在每個圖像周圍放置一個簡單的鏈接，則活動/懸停區域非常小以至於無用。圖像底部可能有幾個像素寬。如果我嘗試在CSS中設置鏈接樣式，圖像將消失。我現在的代碼已經成功地使主動/懸停區域更大，但如果你不能再看到圖像，那麼這些代碼幾乎沒有幫助。

我讀了一些關於消極邊緣的線索的一些評論，並且我確實有一個，但不在同一個div中。我的CSS下面是馬虎/進行中，但這裏是我目前的（沒有損壞，合理有用的鏈接，但沒有圖像 - 只有當時的最終鏈接）。

/* MENU BLOCK */ 
#menu { 
    width: 100%; 
    border-bottom-style:solid; 
    border-bottom-width:2px; 
    border-bottom-color:#000; 
    margin-bottom:50px; 
    padding-left:5px; 
} 

#logo { 
    font-size:100px; 
    vertical-align:bottom; 
    line-height:0px; 
    font-weight:600; 
} 

#topNav { 
    float:right; 
    margin-bottom:50px; 
    line-height:0px; 
    margin-top:-65px; 
    padding-right:5px; 
} 

#topNav p { 
    font-family:Cambria; 
    font-size:24px; 
} 

#socialButtons { 
    position:absolute; 
    left:650px; 
    top:32px; 
    padding-bottom:2px; 
} 

.socialButton { 
    padding-top:5px; 
    width:20px; 
    margin-right:10px; 
} 

.socialButton img { 
    opacity:1; 
    z-index: 50 !important; 
    display: inline !important; 
    opacity: 1 !important; 
} 

.socialLink { 
    width:20px; 
    height:2px; 
    opacity:0; 
    border:0; 
    z-index:-5; 
    background-color: white; 
} 

.socialLink a { 
    opacity:0; 
    text-decoration:none; 

} 

/* END MENU BLOCK */

這裏是我一起工作的菜單（我知道這是一個doc.write文件，這可能是壞的，但我不知道任何其他方式做到這一點，這樣它的工作原理就是我想要的它。）我只試圖鏈接到目前爲止的兩個圖像。 FB具有微小的活動區域，IRC具有正常的活動區域並且沒有圖像。

document.write('<div id="menu"><h1 id="logo" class="brainFlower"><a href="/">Uppagus</a></h1><div id="topNav"><p><a href="http://uppagus.com/about">About</a> &nbsp;&nbsp;&nbsp;<a href="http://uppagus.com/archive">Archive</a> &nbsp;&nbsp;&nbsp;<a id="socialLink" href="">Social</a> &nbsp;&nbsp;&nbsp;<a href="http://uppagus.com/submit">Submit</a></p></div></div><div class="hiddenRow" id="socialButtons"><div id="socialContainer"><div class="socialNavi" style="top:-100px; left:690px;font-weight:bold; font-size:24px; color:#FFA200;">&darr;</div><div id="socialInfoi"></div></div><a href="https://www.facebook.com/pages/Uppagus/182341685267191" target="_blank" title="Facebook"><img class="socialButton" src="http://www.uppagus.com/img/fb.png" /></a><img class="socialButton" src="http://www.uppagus.com/img/twt.png" /><img class="socialButton" src="http://www.uppagus.com/img/g+.png" /><img class="socialButton" src="http://www.uppagus.com/img/rss.png" /><a class="socialLink" href="http://uppagus.com/irc/" title="IRC"><img class="socialButton" src="http://www.uppagus.com/img/irc.png" /></a></div>');

在此先感謝您的幫助！

來源

2013-08-22 Z. Edwards

我很抱歉地說這個，但是這個CSS和HTML真的很混亂和不一致。從我理解你唯一的問題是，沒有顯示IRC圖像，唯一的原因是，「.socialLink」類有「不透明度：0」。關於錨不是圍繞其在這種情況下圖像內容包裝，你應該把在

display: block;

來源

2013-08-22 05:36:31 TheCodeDestroyer

不需要抱歉;我知道。除了現在將圖像推到其他圖像下方的新「行」之外，您的建議運行良好。我想這是一個不同的問題，但。謝謝！ –

如果這解決了你的問題，你可以接受是答案？ – TheCodeDestroyer

你可能有另一個DIV部分覆蓋你的鏈接。我遇到過同樣的問題。我花了一段時間才解決這個問題，因爲很難找到干擾包含鏈接的div的div。我爲每個附近的div添加了背景顏色，直到找到它。我也一次刪除每個附近的div，然後檢查我的鏈接是否正常工作。

也導致該問題的是例如使用

或

<div style="margin-top:-20px">

或使用帶有應用於div同一指令的CSS將它定位。例如，如果你的DIV是：

<div id="mydiv">

和你的CSS有：

#mydiv { position:relative; top:-20px; } or #mydiv { margin-top:-20px; }

這是怎麼了兩個div能在第一時間重疊。表單字段可能會出現同樣的問題 - 您發現無法在字段中單擊並插入光標。

來源

2015-03-22 11:06:01 user2260823

鏈接區域要麼太小，要麼隱藏圖像中的隱藏div

回答

相關問題