Div鼠标输入show并保持焦点

div mouseenter show and stay in focus

本文关键字：焦点 show 鼠标 输入 Div      更新时间：2023-09-26

我试图在鼠标进入和隐藏在鼠标离开时显示一个内部div。我使用jquery hover来完成这个。我的问题是

  1. 当鼠标进入内部div的控件显示从折叠状态
  2. 当我使用内部div选择(下拉)它失去焦点。

如何解决这些问题

我的html

<div id="outter" class="outter">
 <h1>hover me</h1>
<div id="inner" class="inner">
    <select>
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
        <option>6</option>
        <option>7</option>
        <option>8</option>
    </select>
</div>

和javascript

var outter = $("#outter");
var inner = $("#inner");
inner.stop(true, true).hide();
outter.hover(function (e) {
    inner.toggle(function () {
        $(this).animate({
            height: 10
        }, 200);
    });
});

我正在寻求任何建议

JS Fiddler Demo

我需要一些看起来像这样的东西

http://realestate.mysanantonio.com/

但是当我做鼠标悬停/鼠标进入连续我不想触发所有的事件。所以我使用

inner.stop(true, true).hide();

在我的原始代码中停止代码但是我仍然在寻找建议

谢谢

CSS 

.inner {
    background-color:rgba(183, 17, 17, 0.6);
    padding: 10px;
    border-radius: 7px;
    display: none;
}
jQuery 

var stopHiding = false;
outter.mouseenter(function (e) {
    inner.show(function () {
        inner.animate({
            height: 20
        }, 200);
    });
});
outter.mouseleave(function () {
    if (!stopHiding) {
        inner.hide();
    } else {
        stopHiding = false;
    }
});
$('select').change(function () {
    stopHiding = true;
});

JSFiddle

相关文章：