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/

在iFrame上使用自定义光标

2 个答案: