One interesting feature I have on my website is a <div> that expands when clicked, and returns to normal size with another click. However, I am looking for something a bit different...
What I want is for the <div> (with the class name .topHead) to expand when clicked, but then return to its normal size if the cursor moves away from the <div>, without requiring an additional click.
Is this even possible? Any help or solutions would be greatly appreciated!
Check out the jsFiddle for a better understanding: http://jsfiddle.net/saifrahu28/u6YWZ/
HTML
<div class="topHead" ></div>
CSS
.topHead {
height: 60px;
width: 100%;
background: #ccc;
overflow: hidden;
border-bottom: 6px solid #fa9a37;
z-index: 999;
transition: all 1.1s ease;
cursor:pointer;
}
.topHead.active {
height: 100px;
z-index: 999;
background: blue;
border-bottom: 6px solid #fa9a37;
transition: all 0.7s ease;
box-shadow: 0 4px 2px -2px gray;
cursor:default;
}
JS
$(".topHead").click(function() {
$(this).toggleClass("active");
$(".TopsliderArrow").toggle();
});