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 ”。关于在这种情况下图像不包围其内容的锚点，你应该放入

    display: block;

Answer 2

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

该问题的另一个原因是使用例如

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

或

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

或使用具有相同指令的css应用于div来定位它。例如，如果你的div是：

<div id="mydiv">

你的css有：

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

这就是两个div首先可以重叠的方式。表单字段可能会出现同样的问题 - 您发现无法单击该字段并插入光标。

链接区域太小或隐藏div中的图像模糊

2 个答案: