如何让悬停效果保持不变？

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事件使textBox出现(请参阅http://api.jquery.com/fadein/)，然后在用户完成操作时使用图标或链接关闭文本框。

Answer 2

我希望这把小提琴能帮到你，http://jsfiddle.net/S7EjW/

悬停时出现的元素需要在悬停的元素内，否则当鼠标移出时会触发mouseleave事件，从而淡出该元素。

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 3

小提琴链接:

要保持悬停效果，您需要使用Javascript或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类添加到元素中。您可以将CSS属性添加到需要在悬停状态下添加的.show。它将保持悬停状态，直到页面刷新。