Question

首先，我想告诉我一个月前开始学习网络编程，我认为我面临的问题有一个简单的解决方案，但我可以在这里找到它。我不知道它是否因为它非常简单，每个人都知道或因为我找不到合适的关键字来找到它。

好的，这是我的问题：

我想创建一些div，一旦事件mouseenter触发就会滑落，一旦mouseleave就会滑动。

我设法为一个div做了这样做：

Person

但是如果我有多个具有相同类的div，它会触发每个人。

我还试过了＆＃39; currentTarget＆＃39;这样做的：

$('.title').on('mouseenter', () => {
        $('.info').slideDown();
});

$('.box').on('mouseleave', () => {
    $('.info').slideUp();
});

但它甚至没有触发slideDown ....即使我做了一个测试：

$('.box').on('mouseenter', event => {
        $(event.currentTarget).slideDown();
});

但它不起作用。

HTML结构是：

$('.box').on('mouseenter', () => {
        $('.box').slideDown();
});

提前谢谢你，

Answer 1

我认为您可以使用此关键字轻松完成此操作

$('.title').on('mouseenter', () => { $(this).siblings('.info').slideDown(); });

$('.box').on('mouseleave', () => { $(this).find('.info').slideUp(); });

Answer 2

因为我真的很新，所以让我写下所有（我认为重要的）信息：

CSS：

.title {
font-weight: bold;
font-size: 28px;
background-color: #adc9f7;
border-radius: 0;
text-align: center;
border: 3px solid #adc9f7;
margin: auto;
display: block;
}
.info {
display: block;
padding: 0;
display: none;
}
.box {
border: 5px solid #2b70e2;
width: 80%;
margin: 0 auto;
border-radius: 10px;
}

HTML（链接到jQuery）：

<script
          src="https://code.jquery.com/jquery-3.3.1.js"
          integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
          crossorigin="anonymous"></script>

提前谢谢你，

Answer 3

我终于找到了解决方案：

$('.title').on('mouseenter', event => {
    $(event.currentTarget).siblings().slideDown();
});
$('.box').on('mouseleave', event => {
    $(event.currentTarget).children('.info').slideUp();
});

这样做就像我想要只触发'.box'孩子一样。

将currentTarget用于＆＃39; mouseenter＆＃39;多重div的事件

3 个答案: