Question

我需要帮助。我正在开发一个网站，为用户提供电影的下载链接。

但是当 movie_block div（id）元素上的鼠标悬停时，我无法显示 preview_block div（id）。当我徘徊时，我甚至无法使div（preview_block）跟随我的鼠标。

此外，我打算在 preview_block div（id）上发出 AJAX请求，以获取有关电影悬停的信息。

这是我的代码。

一个更简单的小提琴示例：https://jsfiddle.net/o4xcb9m0/1/

<!DOCTYPE html> <html> <head> <link href="includes/styles.css" /> </head> <body> <div class=""> <div id="preview_block" style="display:none"><p>test</p></div> <table>  <tr> <td> <a href="download-link"><span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span></a> <br> <a href="download-link">Movie Name</a> <br> </td> <td> <a href="download-link"><span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span></a> <br> <a href="download-link">Movie Name</a> <br> </td> </tr>  <tr> <td> <a href="download-link"><span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span></a> <br> <a href="download-link">Movie Name</a> <br> </td> <td> <a href="download-link"><span id="movie_block"><img src="image-link" alt="<?php echo $movieNameList->data->movies[0]->title; ?>" /></span></a> <br> <a href="download-link">Movie Name</a> <br> </td> </tr> </table> </div> <script src="includes/scripts.js"></script> </body> </html>

Answer 1

所以，你最好使用鼠标（进入/离开）事件，因为悬停事件会从最内层的孩子（在你的情况下为img）内部冒泡到元素（span在您的情况下）事件已注册。鼠标（进入/离开）事件与hover几乎相同，只是它们不会对事件冒泡做出反应。因此，他们将整个HTML元素注册为一个实体块，并且不会对块内发生的鼠标移动和出现做出反应。

页面底部的jQuery mouseover docs上有一个很好的互动演示，可以解释这一点。

请确保将所有id="movie_block"更改为class="movie_block"，因为ID在任何给定的HTML文档中应该是唯一的。否则他们会使你的HTML无效。

$(".movie_block").on({
    mouseenter: function(event) {
        $("#preview_block").css({top: event.clientY, left: event.clientX}).show();
    },
    mouseleave: function() {
        $("#preview_block").hide();
    }
});

这是a demo，其中包含工作代码。

如果您希望预览块跟随鼠标指针，则可以使用以下内容。

$(".movie_block").on({
    mousemove: function(event) {
        $("#preview_block").css({top: event.clientY, left: event.clientX}).show();
    },
    mouseleave: function() {
        $("#preview_block").hide();
    }
});

A demo以上内容。

Answer 2

所以我不在这里，在我看来，当你应该使用mousemove事件http://api.jquery.com/mousemove/时，你正在使用悬停事件

这是一个链接How to get the coordinates in html using .hover event in jquery?

悬停不会连续发射。因此它不会随着鼠标移动。 How to get the coordinates in html using .hover event in jquery?

关于保持代码干净并易于解答的问题，请尝试将其发布到jsFiddle上，如下所示：

https://jsfiddle.net/o4xcb9m0/1/

<html>
    <body>
        <div class="">

            <a href="foo.com" >Foo
                <span class="movie_block">
                    Bar
                    <img src="foo" />
                </span>
            </a>      
            <div class="preview_block" style="display:none"><p>test</p></div>
        </div>

        <script>
            $(".movie_block").hover(function(event) {
                $(".preview_block").css({color: 'red', top: event.clientY + 'px', left: event.clientX + 'px'}).show();
            }, function() {
                $(".preview_block").hide();
            });
        </script>
    </body>
</html>

在图像悬停时显示AJAX div并按照鼠标操作

2 个答案: