아이콘 상단에 info-note의 CSS 위치 지정

나는 간단한 질문이 있습니다. 웹 사이트의 경우 링크를 가리키면 나타나는 "정보 메모"를 만들고 싶습니다. 미리보기 이미지를 가져 가면 페이스 북처럼 보이게됩니까? 여기 아이콘 상단에 info-note의 CSS 위치 지정

내가이 순간을 위해있는 것입니다, 그래서 당신은 내가 가지고있는 버그를 볼 수 있습니다 그래서 유일한 문제는

alt text http://img641.imageshack.us/img641/1571/notes.gif 을 : 작은 "정보는 참고"내 DIV의 왼쪽에있어. 목표는이 작은 메모가 오른쪽 아이콘 위에 잘 배치 된 것입니다./

이 작업을 수행하려면 javascript가 필요합니다. 또는 우리는 CSS를 함께 할 수 있습니다 만 (이 경우, 어떤 일이 내 코드를 잘못 : /) :

<a href="#" onmouseover="infohover('show', 'aaa');" onmouseout="infohover('hide', 'aaa');"> 
    <span class="infohover" id="aaa"><span class="infohover_in">J'aime !</span></span> 
    <img src="<?php echo $basedir; ?>images/temp/heart.png" alt="" /> 
</a>

와 CSS : 정보

는, 여기에 html로 이것에 대한 코드입니다

.infohover { display: none; position: relative; float: left; margin-top: -30px; margin-left: -4px; opacity: 0.9; background: url('<?php echo $basedir; ?>images/temp/infohover_arrow.gif') 8px 24px no-repeat; } 
.infohover_in { display: block; padding: 6px; margin-bottom: 6px; background-color: #000000; color: #ffffff; border-radius: 3px; }

추신 : "기록 완벽하지"코드에주의를 지불하지 않는다, 나는 그것을 할 수 있는지, 시험에 빨리 쓰기 없거나은 ... :-) 나중에

를 청소합니다

덕분에 많은 도움을 받았습니다. deas! 좋은 하루 보내!

출처

2010-06-30 jb_

여기에 자바 스크립트가 필요하지 않습니다.

HTML

<a href="#" class="tooltip">Icon 1<span class="tooltip">Tooltip 1</span></a> 
<a href="#" class="tooltip">Icon 2<span class="tooltip">Tooltip 2</span></a> 
<a href="#" class="tooltip">Icon 3<span class="tooltip">Tooltip 3</span></a>

CSS

a.tooltip { 
    text-decoration: none; 
    position: relative; 
} 
a.tooltip .tooltip { 
    position: absolute; 
    top: -1.1em; 
    left: 0; 
    display: none; 
    color: black; 
    white-space: nowrap; 
} 
a.tooltip:hover .tooltip { 
    display: block; 
}

마법이 a.tooltip { position: relative; }입니다. position: relative의 요소가있을 때마다 해당 요소 내의 요소는 position: absolute이며 해당 부모 요소에 상대적으로 배치됩니다. 이것에 약간 :hover 의사 행동을 더하면 문제를 매우 쉽게 해결할 수 있습니다.

Live demo.

출처

2010-06-30 04:00:49

감사합니다 !! 이것은 절대 링크로 설정되어야합니다. 이제 모든 것이 작동합니다! :-)) ps : "라이브 데모"가 나를 위해 작동하지 않습니다 (사파리와 파이어 폭스에서), 툴팁이 왼쪽에 머물러 있습니다 ... –

죄송합니다. 질문을 잘못 읽었습니다. 나는 그것이 당신이 원한 것이라고 생각했다.) 나는 당신이 묘사 한 것처럼 행동 할 나의 대답을 편집했다. –

이 작업을 수행 할 수있는 YUI Container을 확인하십시오. 페이지의 요소와 정렬되도록 팝업 대화 상자를 배치하는 세 번째 예제에 주목하십시오.

또한 컨테이너에 대한 사용자 정의 스킨을 만들어야합니다. YUI에는 방법을 알려주는 기사가 있습니다.

jquery를 사용할 수도 있습니다.

자신 만의 롤 수 있습니다. 그러나 일반적으로 라이브러리를 사용하는 것이 더 빠르고 더 빠릅니다.

출처

2010-06-30 02:51:50

이 팁 덕택에 언젠가는 도움이 될 것입니다 !! :-) –

아이콘 상단에 info-note의 CSS 위치 지정

답변

관련 문제