css - 链接区域太小或遮挡了隐藏 div 中的图像

Question

我的网站顶部有一个菜单栏。单击“社交”链接会显示一个隐藏的 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>');

在此先感谢您的帮助!

Answer 1

很抱歉这么说，但是这个 CSS 和 HTML 真的很乱而且不一致。 据我了解，您唯一的问题是未显示 IRC 图像， 唯一的原因是“.socialLink”类具有“不透明度:0”。 关于在这种情况下图像中没有环绕其内容的 anchor ， 你应该输入

    display: block;