javascript - 单击以展开 ，但将鼠标悬停在远处以返回正常大小

Question

我有一个 <div>单击它时会展开，然后再次单击它以恢复正常大小，这很好，但我想要类似...

当点击 <div> (类名 .topHead)如果光标从 <div> 移动，它应该展开并恢复到正常大小无需点击即可恢复正常大小

这可能吗？任何解决方案将不胜感激。

js fiddle : 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();        

        }); 

Answer 1

试试这个

$(".topHead").click(function() {
 $(this).toggleClass("active");
}).mouseout(function(){
 !$(this).hasClass("active")||($(this).toggleClass("active")/*,...*/);
}); 

http://jsfiddle.net/u6YWZ/2/