Question

重要

通过修改我的实际代码解决了这个问题。下面的简化代码应该按预期工作，因为我的实际代码不起作用，因为它是用函数和不同的布局制作的，但我现在意识到我犯了一个愚蠢的逻辑错误。

我试图在google上找到这个并且没有找到并回答，我不知道我是不是正确地问谷歌，但我想要实现的是这样的

HTML：

<div class="animates-whats-inside">
    <h1>This title will be animated when you put the cursor on my parent</h1>
</div>
<div class="animates-whats-inside">
    <h1>This title will be animated when you put the cursor on my parent</h1>
</div>

jQuery的：

$('.animates-whats-inside').on('mouseenter', function() {
    $(this).children().find('h1').animate(...);
});

已编辑详情：

如果我在第一个div中移动鼠标，我只想移动第一个div中的标题但不移动第二个div中的标题，如果我在第二个div中移动鼠标，则移动标题在第二个div中，但不是第一个中的那个，现在它移动了不同部分中的所有标题。我怎样才能做到这一点？我确定这应该很简单，但我还没弄清楚如何搜索这个选择器！

事先谢谢！

Answer 1

你可以抓住第一个h1并附加一个mouseenter事件的事件处理程序，如下所示（我改变了一下你的选择器）：

$('.animates-whats-inside > h1').first().on('mouseenter', function() {
    $(this).animate(...);
});

＆＃13;

$(function(){
    $('.animates-whats-inside > h1').first().on('mouseenter', function() {
        debugger;
        $(this).animate({ opacity: 0.25,
    left: "+=50",
    height: "toggle"});
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animates-whats-inside">
    <h1>This title will be animated when you put the cursor on my parent</h1>
</div>
<div class="animates-whats-inside">
    <h1>This title will be animated when you put the cursor on my parent</h1>
</div>

＆＃13;

Answer 2

Yok可以使用悬停事件。

$('element').hover(hoverFunction,unhoverFunction);

Answer 3

似乎你不需要做#include "stdafx.h" #include <vector> #include <map> #include <iostream> #include <string> using namespace std; int main(int argc, char* argv[]) { map<string, vector<string>> myMap; myMap["key1"] = { "m00", "m01", "m02" }; myMap["key2"] = { "m10", "m11" }; myMap["key3"] = { "m20", "m21", "m22", "m23" }; for (auto m : myMap) { string const & key = m.first; vector<string>& v = m.second; cout << "Key=" << key.c_str(); for (auto i : v) cout << " " << i.c_str(); cout << endl; } return 0; }，因为children是

的直接后果

h1。你可以这样做

.animate-whats-inside

DEMO

Answer 4

尝试选择.animates-whats-inside

的直接后代

$('.animates-whats-inside').on('mouseenter', function() {
    $(this).find('> h1').animate(...);
});

Answer 5

参考以下代码：

<script type="text/javascript">
    $(document).ready(function(){
        $('.animates-whats-inside').each(function() {
            $(this).on('mouseenter', function() {
                $(this).children().find('h1').css("color","red")
            });
        });
    });


</script>

如何仅在使用的元素中触发事件 - jQuery

5 个答案: