Question

您好我想知道如何使用jQuery的mouseenter快捷方法通过on（）jQuery方法使用mouseenter来复制以下行为。

以下基本代码： HTML

<dl>
    <dt>tab 1</dt>
    <dd>info.</dd>
    <dt>tab 2</dt>
    <dd>info.</dd>
    <dt>tab 3</dt>
    <dd>info.</dd>
</dl>

jQuery -

$('dl').on('mouseenter', 'dt', function() {
    $(this)
        .next()
            .slideDown(200)
});

所以上面的行为中只有'dt'元素在jQuery集合中使用下面的快捷方式。

$('dl').mouseenter(function() {
    $(this)
        .next()
            .slideDown(200)
});

的jsfiddle：

感谢

Answer 1

由于您要定位dt元素下的dl元素，因此您需要使用descendant selector

$('dl dt').mouseenter(function () {
    $(this).next().slideDown(200)
});

演示：Fiddle

Answer 2

您也可以使用

$('dl').find('dt').mouseenter(function () {
   $(this).next().slideDown(200)
});