jquery - 在 iFrame 上使用自定义光标

Question

单击按钮时，我正在使用以下代码更改光标：

$("#mybutton").click(function(){
       $("*").css("cursor", "url('images/cur_circle_01.png'), auto");
   });

光标按预期更改，但只要我将鼠标移到 iframe 上，光标就会恢复正常。

有没有办法来解决这个问题？预期的行为是根据按钮单击来更改鼠标指针。

Answer 1

当光标位于<iframe>. 这是因为浏览器正在渲染一个完全不同的网页，它自己的 HTML 和 JS 在您的主 HTML 文档中执行。

Answer 2

老问题，但值得回答。我使用 div 作为覆盖，而不是将光标添加到元素上，我只是将它放在 div 上。这样，iframe 就具有光标在其上的外观。重要的是在加载完成后将其关闭，否则您将无法单击任何内容。（调整大小和位置以适合 iframe 窗口）。

<style>
    #overlay{
        display:none;
        position: absolute;
        width:100px;
        height:100px;
        top:0;
        left:0;
        z-index:10000;
        cursor: wait !important;
    }
</style>

<div id="overlay"></div>
<iframe id="myiframe" sr=""></iframe>
<input id="mybutton" type="button" value="Click Me" />

<script>
    //Show overlay, load iframe src
    $("#mybutton").click(function(){
        $('#overlay').show();
        $('#myiframe').attr('src','https://www.google.com');
    });

    //Hide overlay after load of iframe.
    $('#myiframe').load(function () {
        $('#overlay').hide();
    });
</script>

Google 不会在 JSFiddle 上加载 Iframe，但这为您提供了一个可行的思路。https://jsfiddle.net/tbkyjwLn/2/