Используйте пользовательский курсор на плавающем фрейме

Question

Я использую следующий код, чтобы изменить курсор при нажатии на кнопку:

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

Курсор, как и ожидалось, но как только я двигаю мышь над IFRAME, курсор возвращается к нормальному.

Есть ли способ исправить это? Предполагаемое поведение заключается в изменении указателя мыши на основе щелчков кнопок.

Answer 1

Вы не можете управлять курсором, когда он находится над . Это связано с тем, что браузер создает совершенно другую веб-страницу с собственным 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 не загружается в iframe на JSFiddle, но это дает вам полезную идею. https://jsfiddle.net/tbkyjwLn/2/