Question

我正试图在mouseenter上显示内部div并隐藏在mouseleave上。我使用jquery悬停来完成那个。我的问题是

当mouseenter inner div的控件从折叠状态显示时。
当我使用内部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/

但是当我连续做mouseover / mouseenter时，我不想解雇所有事件。所以我用了

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

该代码在原始代码上停止，但我仍然在寻找建议

感谢

Answer 1

<强> 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

div mouseenter显示并保持焦点

1 个答案: