0

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

提前感谢您的帮助！

4

2 回答 2

2

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

    display: block;
于 2013-08-22T05:36:31.017 回答
0

您可能有另一个 div 部分覆盖了您的链接。我遇到过同样的问题。我花了一些时间来修复它，因为很难找到干扰包含链接的 div。我为附近的每个 div 添加了背景颜色，直到找到它。我还一次删除了附近的每个 div，然后检查我的链接是否正常工作。

也促成了这个问题是使用例如

<div style="position:relative; top:-20px">

或者

<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-22T11:06:01.247 回答