javascript - 点击展开但以正常尺寸悬停在后面

Question

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

单击<div>（类名 .topHead）时，如果光标<div>从

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

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

我会担心使用toggle(). 此方法不使用切换，因此可能更适合您的需求。

$(".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();
    });

演示小提琴

更新：

结果 toggle() 工作得很好：

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

工作演示小提琴

Answer 3

$(".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