Javascript 单击展开a<；部门>；但将鼠标悬停到正常大小

我有一个

，当点击它时，它会展开，然后再次点击它回到正常大小，这很好，但我想有一个像

当点击

（类名.topHead）时，如果光标从

移动，它应该展开并返回到正常大小，而无需点击将其恢复到正常大小

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

js小提琴：

HTML

<div class="topHead" ></div>

JS

.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;
}

$(".topHead").click(function() {
            $(this).toggleClass("active");
            $(".TopsliderArrow").toggle();        

        }); 

将此添加到您的js中

我担心使用

toggle（）

会使活动类和TopSliderRow可见性不同步。此方法不使用切换，因此可能更适合您的需要。

更新：

结果表明toggle（）可以正常工作：

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

试试这个

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

---

你的帽子怎么了。mouseout mouseleave..应该是

removeClass

，而不是

remove

。当然！那是我的一个输入错误，我发现了一个问题。如果.topHeader div中有任何文本或其他内容，并且鼠标移动到该文本，.topHeader将返回到原始大小。是。。。将鼠标移出该元素时。如果只有一个文本，它就工作了。。。如果在notso中放置其他元素，则只添加一个不带h1或span的文本。。和背景图像。它会起作用的。

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

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