html - 如何使悬停效果保持不变？

Question

我有一堆按钮，当悬停在按钮上时，文本框会出现在堆栈的右侧。文本框的目的是成为一个滚动框，但为了做到这一点，我需要能够滚动。不幸的是，当我将鼠标从滚动该框的按钮上移开时，该框消失了，因为我的鼠标不再位于按钮上以“激活”它。

您可以在 my page here 上看到现场示例.向下滚动到左侧的“佣金”框，您会看到它。

我希望获得比 this page 上的效果更多的效果显示在“艺术信息”中。

这是CSS代码:

*{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 代码:

<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>

非常感谢您的帮助，提前!- 利

Answer 1

您可以使用 jquery fadeIn 使文本框出现(请参阅 http://api.jquery.com/fadein/ )和 onmouseover 事件，然后有一个图标或链接以在用户完成时关闭文本框。