호버링 효과를 유지하는 방법은 무엇입니까?

Question

나는 스택의 오른쪽에 텍스트 상자를 표시하는 스택을 가지고 있습니다. 텍스트 상자의 목적은 스크롤 상자가되는 것입니다.하지만 그렇게하려면 스크롤 할 수 있어야합니다. 불행하게도 마우스를 단추에서 떼어 내면 상자를 스크롤 할 때 마우스가 더 이상 "활성화"되지 않으므로 상자가 사라집니다.

당신은 my page here에 라이브 예를 볼 수 있습니다. 왼쪽의 "커미션"상자로 스크롤하면 볼 수 있습니다.

나는 효과 "예술 정보"에서 this page 쇼에 하나 더 얻을 찾고 있어요.

<div class="left"><h1>Commissions</h1><h2>Hover for more information</h2><div   class="wrap"><a class="button" href="http://gracefuleigh.deviantart.com/gallery/48200599">Manipulations</a><div class="textbox"><div class="lmf"></div>Manipulations textbox</div></div><div class="wrap"><a class="button" href="http://gracefuleigh.deviantart.com/gallery/47299585">Howrse Layouts</a><div class="textbox"><div class="lmf"></div>Howrse Layouts textbox</div></div><div class="wrap"><a class="button" href="http://gracefuleigh.deviantart.com/gallery/49118216">Gallery Directories</a><div class="textbox"><div class="lmf"></div>Gallery Directories textbox</div></div><div class="wrap"><a class="button" href="http://gracefuleigh.deviantart.com/gallery/48666470">Journal Skins</a><div class="textbox"><div class="lmf"></div>Journal Skin textbox</div></div><div class="wrap"><a class="button" href="http://gracefuleigh.deviantart.com/gallery/47299612">Banners</a><div class="textbox"><div class="lmf"></div>Banners textbox</div></div><div class="wrap"><a class="button" href="http://gracefuleigh.deviantart.com/gallery/48200600">Stamps &amp; Icons</a><div class="textbox"><div class="lmf"></div>Stamps &amp; Icons textbox</div></div><div class="wrap"><a class="button" href="http://gracefuleigh.deviantart.com/gallery/49118169">Folder Menus</a><div class="textbox"><div class="lmf"></div>Folder Menus textbox</div></div> <div class="wrap"><a class="button" href="">Other</a><div class="textbox"><div class="lmf"> </div> Other textbox </div></div> <h2>Page design by :devgracefuleigh:</h2> </div> <div class="clear"></div> 

이 사전에 도움을 주셔서 너무 감사합니다

여기

*{background:white; border:none; padding:0; margin:0;} 

.gr{padding:0 !important;} 
.gr-top img, .gr1, .gr2, .gr3 {display:none;} 
.gr-top, .bottom, a.external:after, .left br {display:none;} 
a{text-decoration:none; font-weight:normal;} 
.external{display:block;} 

h1{ 
font-family:Times; 
text-align:center; 
font-size:18px; 
color: #83d4cc; 
font-style: italic; 
letter-spacing: 3px; 
line-height:10px; 
} 

h2{ 
font-family:Times; 
text-align:center; 
font-size:13px; 
color: #252424; 
font-style: italic;} 

.gr-box{ 
z-index:99!important; 
font-family:Times; 
text-align:center; 
font-size:13px;} 

.text{ 
position:relative; 
margin:10px 10% 10px 10%;} 

.left{width:180px;} 

.textbox{ 
display:none; 
width:276px; 
height:276px; 
margin-top:32px; 
position:absolute; 
overflow:scroll; 
background: #83d4cc; 
left:210px; 
color: #ffffff; 
top:0;} 


.wrap:hover .textbox{display:inline-block;} 

.button{ 
display:block; 
color: #FFFFFF; 
background: #252424; 
border-radius:0px; 
padding:9px 0px; 
margin-bottom:4px;} 

.button:hover{ 
color: #FFFFFF; 
background: #83d4cc; 
} 

.button span{ 
display:none; 
font-size:0.85em;} 

.button:hover span{display:inline;} 

는 HTML 코드입니다 :

다음은 CSS 코드입니다! 는 - 메신저 난 내 머리 위로 떨어져 알고있는 당신이 질문에 대답 수 있도록 리

는

Answer 1

내가 언급 할 수있다. CSS3에

보면, 당신은 당신은 텍스트 상자가 나타납니다 onMouseover와 이벤트와 (http://api.jquery.com/fadein/ 참조) 할 JQuery와 fadeIn를 사용할 수 있습니다

Answer 2

에 익숙해 져야합니다 연산자 ">"이 다음 아이콘이나 링크가 사용자가 끝나면 텍스트 상자를 닫습니다.

Answer 3

나는 마우스가 밖으로 이동할 때이 요소를 페이드 MouseLeave 이벤트를 트리거, 다른 사람이 바이올린 밖으로 http://jsfiddle.net/S7EjW/

가리킬 요소 내부에 있어야 호버에 표시되는 요소를 당신을 도울 수있는이 희망 떨어져서.

HTML

<div class="element"> 
    <span class="title">Hover Me to see info.</span> 
    <span class="info">This is a sample info span that appears on hovering the title.</span> 
</div> 

JS

$(".element").hover(function(){ 
    $(this).find(".info").fadeIn(500); 
}, function(){ 
    $(this).find(".info").fadeOut(500); 
}); 

Answer 4

바이올린 링크 : http://jsfiddle.net/z3EML/

당신은 자바 스크립트 또는 jQuery를 사용할 필요가, 호버 효과가 유지 확인합니다. 요소를 가리키면 표시 할 요소에 클래스를 추가합니다. 이처럼

:

HTML :

<div class="menu"> 
    <a href="#" class="show_textbox">Hover</a> 
</div> 
<div class="textbox"> 
    <input type="text"/> 
</div> 

CSS :

.menu{ 
    float:left; 
} 
.show_textbox{ 
    background:#dadada; 
    padding:5px; 
    color:#000; 
    text-decoration:none; 
} 
.textbox{ 
    float:left; 
    display:none; 
    margin-left:5px; 
} 
.show{ 
    display:block!important; 
} 

JS : 때

$(document).ready(function(){ 
    $('.show_textbox').hover(function(){ 
     $('.textbox').addClass('show'); 
    }); 
}); 

이 jQuery를이 요소에 .show 클래스를 추가합니다 t는 들었다. CSS 속성을 호버 상태로 추가해야하는 .show에 추가 할 수 있습니다. 페이지를 새로 고칠 때까지 마우스 오버 상태를 유지합니다.