CSS on hover stay (with pre-structured CSS) - css

Question

I'm new up here, and I tried ti find an answer to my question on existing forums. I tried some and couldn't resolve the issue.
I want to make the hover effect to stay after mouseout on this pre-structured code.
Someone have an idea ?
Thanks much !!!
#search_block_top {
position:absolute;
right: 0;
top: 120px;
z-index: 99;
}
#search_block_top p {padding:0;}
#search_block_top #search_query_top {
border: medium none;
height: 31px;
padding: 0;
width: 1px;
background:#FFF;
box-shadow:none;
line-height: 33px\9;
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
}
#search_block_top .button {
background: url("img/bg-search.png") no-repeat scroll right center transparent;
border: medium none;
border-radius: 0 0 0 0;
height: 33px;
line-height: 33px;
margin: 10px -5px 0 0;
padding: 0;
text-indent: -9999px;
width: 57px;
}
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox:hover #search_query_top{
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
#searchbox{}
#searchbox label{
text-indent: -9999px;
}
#searchbox #search_query_block{
border: 1px solid #CCCCCC;
-webkit-border-radius:3px !important;
-moz-border-radius:3px !important;
border-radius:3px !important;
height: 18px;
margin-top:10px;
}
#searchbox #search_button{padding: 1px 4px;}

Answer 1

#badAdviceGuy is right on this one. There's no way in pure css to make the change stay there after you've hovered off of it.
If you do want to venture into jQuery territory however, it would look something like this:
$(document).on('mouseenter', '#hover-element', function(){
$(this).addClass('highlight');
});
Then you would just add whatever changes you want to take place to the highlight class in css and voila!
hope that helps

Answer 2

Well it's best practice to put the jQuery code into a separate js file, but it seems like you'd rather just get it to work so here's the quick and dirty way:
using the css you added above, your new css will look like this:
Change this:
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox:hover #search_query_top{
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
To be this:
#search_query_top:focus,
#searchbox:focus #search_query_top,
#searchbox.highlight #search_query_top {
-moz-transition: width 0.5s ease 0s;
-o-transition: width 0.5s ease 0s;
-ms-transition: width 0.5s ease 0s;
-webkit-transition: width 0.5s ease 0s;
width: 130px;
padding-left:10px;
margin: 10px 0 0;
background:#fff;
border: 1px solid #CCC;
}
the html you copied in won't need to be changed, don't worry about that. Then you'll want to add this code into your header before the closing </head> tag
<script type="text/javascript">
$(document).ready(function(){
$(document).on('mouseenter', '#searchbox', function(){
$(this).addClass('highlight');
});
});
</script>
The only issue with this is that you may not have already included the jQuery library. If you put this code in and it doesn't work, add the following code into the header right before the js code you just put in:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
Let me know if that helps, to answer your second question, no, css won't be able to override the styling on mouseleave.
Keep in mind also that if you're using something like wordpress, then the rules are different and none of this code will work.
good luck!