How to make a hover effect remain? - html

Question

I have a stack of buttons that, when hovered upon, make a text box appear on the right side of the stack. The purpose of the text box is to be a scroll box, but in order to do that, I need to be able to scroll. Unfortunately, when I take my mouse off the button TO scroll that box, the box goes away because my mouse is no longer on the button to "activate" it.
You can see the live example on my page here. Scroll down to the "Commissions" box on the left and you will see it.
I'm looking to get more of the effect that the one on this page shows in "Art Info".
Here is the CSS code:
*{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;}
Here is the HTML code:
<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 & Icons</a><div class="textbox"><div class="lmf"></div>Stamps & 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>
Thank you so much for the help, in advance!
- Leigh

Answer 1

You can use jquery fadeIn to make the textBox appear (see http://api.jquery.com/fadein/) with the onmouseover event, then have an icon or link to close the text box when the user is finished.

Answer 2

I hope this this fiddle can help you out http://jsfiddle.net/S7EjW/
The element which is appearing on hover needs to be inside the element which is hovered, else when the mouse moves out it triggers the mouseleave event which fades the element off.
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

Fiddle Link : http://jsfiddle.net/z3EML/
To make hover effect remain, you need to use Javascript or jQuery.
On hovering of element, you'll add the class to the element which you need to show.
Like this :
HTML :
<div class="menu">
Hover
</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');
});
});
This jQuery will add the .show class to the element when it is hovered. You can add CSS properties to .show which you need to add in hover state.
It'll keep the hover state until the page is refreshed.

Answer 4

I couldn't comment, so im answering you question with what i know off the top of my head.
look into CSS3, there is an operator ">" that you should become familiar with