Jquery 在iFrame上使用自定义光标

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

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

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

---

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

当光标位于

上时，您无法控制光标。这是因为浏览器呈现的是一个完全不同的网页，它自己的HTML和JS在主HTML文档中执行。

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

#覆盖层{
显示：无；
位置：绝对位置；
宽度：100px；
高度：100px；
排名：0；
左：0；
z指数：10000；
游标：等等！重要的；
}
//显示覆盖，加载iframe src
$（“#我的按钮”）。单击（函数（）{
$（“#覆盖”）.show（）；
$（'#myiframe'）.attr（'src'，'https://www.google.com');
});
//加载iframe后隐藏覆盖。
$（'#myiframe'）.load（函数（）{
$（“#覆盖”）.hide（）；
});

谷歌不会在JSFiddle上加载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>