링크 영역이 너무 작거나 숨겨진 div의 이미지가 흐려짐

Question

내 사이트 상단에 메뉴 모음이 있습니다. "소셜"링크를 클릭하면 사회적 아이콘 이미지의 가로 행이 포함 된 숨겨진 div가 표시됩니다. 나는 지금이 이미지들을 다양한 사이트와 지혜로 연결되도록하려고 노력 중이다.

각 이미지 주위에 일반 링크를 추가하면 활성/마우스 오버 영역이 너무 작아서 쓸모가 없습니다. 어쩌면 이미지의 아래쪽에 몇 픽셀 너비. CSS로 링크의 스타일을 지정하면 이미지가 사라집니다. 지금 내가 사용한 코드는 활성/호버 영역을 더 크게 만드는 데 성공하지만 더 이상 이미지를 볼 수 없다면 거의 도움이되지 않습니다.

다른 스레드에서 음수 여백에 대해 약간의 댓글을 읽었습니다. 아래의 내 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"클래스에 "opacity : 0"이 있다는 것입니다. 에 대해서는 앵커는이 경우 이미지의 내용 주위에 배치하지 당신은 당신은 아마 부분적으로 귀하의 링크를 포함하는 다른 사업부가

display: block; 

Answer 2

에 넣어해야합니다. 나는 같은 문제가 있었다. 링크가 포함 된 div를 방해하는 div를 찾기가 어려웠으므로 수정하는 데 시간이 걸렸습니다. 나는 그것을 발견 할 때까지 주변의 각 div에 배경색을 추가했습니다. 한 번에 각 주변 div를 하나씩 제거한 다음 내 링크가 제대로 작동하는지 확인했습니다.

또한 문제의 원인은 예를 들어.

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

또는

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

하거나 위치로 DIV인가 동일한 지시어와 CSS를 사용.

<div id="mydiv"> 

과 CSS는이 : 예를 들어, 사업부 인 경우

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

이 두 div의 첫 번째 장소에서 중복 수있는 방법입니다. 양식 필드에서 동일한 문제가 발생할 수 있습니다. 여기서 필드를 클릭하고 커서를 삽입 할 수 없습니다.