Question

我有一堆按钮，当它们盘旋时，会在堆栈的右侧显示一个文本框。文本框的目的是成为一个滚动框，但为了做到这一点，我需要能够滚动。不幸的是，当我将鼠标从按钮上滚动时，滚动该框，该框就会消失，因为我的鼠标不再位于按钮上以激活＆＃34;它。

您可以在my page here上看到实时示例。向下滚动到＆＃34;佣金＆＃34;左边的方框，你会看到它。

我希望获得this page上的那个效果更多地显示在＆＃34;艺术信息＆＃34;中。

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

非常感谢您的帮助，提前！ - Leigh

Answer 1

您可以使用jquery fadeIn使用onmouseover事件显示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

小提琴链接：http://jsfiddle.net/z3EML/

要保持悬停效果，您需要使用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。它将保持悬停状态，直到刷新页面。

Answer 4

我无法发表评论，所以我回答你的问题而不知道我的想法。

调查CSS3，有一个运营商＆＃34;＆gt;＆＃34;你应该熟悉

如何保持悬停效果？

4 个答案: