Javascript 创建翻转指针动画

我试图创造一种效果，当你翻过一个图像时，一个指针会指向它。与本网站中使用的相同，大约在一半以下：

我不知道从哪里开始，或者是否有JQuery或插件，但我找不到

---

感谢您的帮助。

我肯定有一些jQuery插件可以做到这一点，但这可能是不必要的。通过一些基本的HTML、CSS和JavaScript，您可以很容易地完成这一任务

我创建了一个JSFIDLE来帮助您开始

请注意，上面的内容非常粗糙，你肯定需要根据自己的需要进行按摩，但希望它能帮助你走上正确的道路

我也会在这里列出代码来解释

HTML:

CSS为我们的块设置了一些宽度和高度，并创建了箭头元素。我们将这些箭头元素相对于每个块进行定位，并将它们放置在每个块的中上部

JavaScript:

$(document).ready(function() {
    $('.block').hover(function() {
        $(this).find('.arrow').show();
    }, function() {
        $(this).find('.arrow').hide();        
    });
});

---

上面的JavaScript非常简单，基本上只监听鼠标悬停在块上的情况，并根据用户鼠标在块上的状态显示/隐藏箭头。

谢谢您的帮助。良好的起点。试着让我的头脑在所有事情上保持清醒。我可以添加文字吗？@HenryBrown你可以做任何你能想象的事情。我鼓励你使用上面的例子，研究一下你想在网上做的其他事情。我想你会发现，如果你努力一点，你可以学得更好。如果你陷入困境，请随时提出更具体的问题！（有些人不喜欢你在这个网站上提出非常宽泛、包罗万象的问题，所以尽量保持小而具体，并展示你解决问题的努力。）谢谢你的帮助，我会继续玩下去

.container {
    width: 960px;
    margin: 0 auto;
}

.block {
    width: 100px;
    height: 150px;
    background-color: #000;
    float: left;
    margin-right: 20px;
    position: relative;
}

.arrow {
    display: none;
    position: absolute;
    top: 0;
    left: 25%;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;

    border-top: 25px solid #FFF;
}

$(document).ready(function() {
    $('.block').hover(function() {
        $(this).find('.arrow').show();
    }, function() {
        $(this).find('.arrow').hide();        
    });
});