懸停圖像時顯示AJAX div並跟隨鼠標

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

因此，最好使用mouse（enter / leave）事件，因為懸停事件從最里面的子對象（您的情況下為img ）冒泡到該事件注冊到的元素（您的情況下為span ）內。 鼠標（輸入/離開）事件與hover幾乎相同，除了它們不對事件冒泡做出反應。 因此，他們將已注冊的整個HTML元素視為一個完整的塊，並且不會對塊內發生的鼠標懸停和移出做出反應。

頁面底部的jQuery mouseover文檔上有一個很好的交互式演示，它解釋了這一點。

確保將所有出現的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();
    }
});

這是具有工作代碼的演示。

而且，如果您希望預覽塊跟隨鼠標指針，則可以使用以下內容。

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

上面的演示。

Answer 2

所以Id在這里，在我看來，當您應該使用mousemove事件http://api.jquery.com/mousemove/時，您正在使用懸停事件。

這是一個鏈接如何在jquery中使用.hover事件獲取html中的坐標？

懸停不會連續發射。 因此它不會隨鼠標移動。 如何在jquery中使用.hover事件獲取html中的坐標？

為了保持代碼的清潔和易於回答，請嘗試將其發布在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 個解決方案

解決方案1
2 已采納 2015-06-28 16:28:36

解決方案2
0 2015-06-28 16:24:23

懸停圖像時顯示AJAX div並跟隨鼠標

問題描述

2 個解決方案

解決方案1 2 已采納 2015-06-28 16:28:36

解決方案2 0 2015-06-28 16:24:23

解決方案1
2 已采納 2015-06-28 16:28:36

解決方案2
0 2015-06-28 16:24:23