单击以展开<div>，但将鼠标悬停在正常大小</div>中

Question

我有一个<div>在点击它时会扩展并再次以正常尺寸点击回来，这很好但是我想要有类似的东西......

单击<div>（类名.topHead）时，如果光标从<div>移开而不需要单击以使其恢复正常，它应该展开并返回到正常大小大小

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

小提琴： 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/

Answer 2

$(".topHead").on("mouseout",function() { // you may use mouseleave as well instead of mouseout
            $(this).removeClass("active");
            $(".TopsliderArrow").hide();  // Not Sure what this does but I guess you may hide this      

        });

将此添加到您的js

Answer 3

我担心使用toggle()使活动类和TopsliderArrow可见性不同步。此方法不使用切换，因此可能更适合您的需求。

$(".topHead")
    .on("click",function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
            $(".TopsliderArrow").hide();
        } else {
            $(this).addClass("active");
            $(".TopsliderArrow").show();
        }       
    })
    .on("mouseout",function(){
        $(this).removeClass("active");
        $(".TopsliderArrow").hide();
    });

Demo Fiddle

<强>更新

变成toggle（）可以正常工作：

$(".topHead")
    .on("click",function(){
        $(this).toggleClass("active");
        $(".TopsliderArrow").toggle();      
    })
    .on("mouseout",function(){
        $(this).removeClass("active");
        $(".TopsliderArrow").hide();
    });

Working Demo Fiddle