Форум

rihh · #1 (**permalink**) 08.12.2010, 23:01

Добрый вечер.

Ситуация такая, под курсором динамически появляется объект, у которого cursor:pointer, к примеру, однако, пока мышь не двинешь, курсор остается от предыдущего объекта. Подскажите, пожалуйста, имеется ли возможность программно перерисовать курсор средствами JS?

Спасибо.

Aetae · #2 (**permalink**) 08.12.2010, 23:34

Конкретной функции нет, так что мучайтесь-извращайтесь. Самое весёлое(кроссбраузерность) ещё впереди.)

Sweet · #3 (**permalink**) 09.12.2010, 00:40

<head>
<style>
DIV {
  position: absolute;
  height: 100px;
  width: 200px;
}
</style>
</head>
<body>
<div id="elem" style="background: #ff0;">&nbsp;</div>
<script>
document.getElementById('elem').onclick = function(){
  var newDiv = document.createElement('div');
  newDiv.style.background = '#f00';
  newDiv.style.cursor = 'pointer';
  newDiv.innerHTML = '&nbsp;';
  document.body.appendChild(newDiv);

  *!*this.style.cursor = 'pointer';*/!*
};
</script>
</body>

rihh · #4 (**permalink**) 09.12.2010, 14:26

Я имею в виду такую ситуацию:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#done').click( function () { 
		$("#done").animate({marginLeft:"-200px"}, 300, function() {
			
			})
		;return false;
	}); 
});
</script>
<style>
#done, #dtwo, #wrapper{width:200px; height:200px; overflow:hidden; float:left;}
#slider{width:400px; height:200px;}
#done{background:#600;cursor:pointer;}
#dtwo{background:#006;cursor:default;}
</style>
</head>
<body>
<div id="wrapper">
	<div id="slider">
			<div id="done"></div>
			<div id="dtwo"></div>
	 </div>
</div>
</body>
</html>

Sweet · #5 (**permalink**) 09.12.2010, 18:28

Ну сделай либо так:

$("#done").css({cursor: 'default'}).animate({marginLeft:"-200px"}, 300);

либо так:

$("#done").animate({marginLeft:"-200px"}, 300, function() {
  this.style.cursor = 'default';
});

rihh · #6 (**permalink**) 10.12.2010, 10:34

Сообщение от Sweet

Ну сделай либо так:

$("#done").css({cursor: 'default'}).animate({marginLeft:"-200px"}, 300);

либо так:

$("#done").animate({marginLeft:"-200px"}, 300, function() {
  this.style.cursor = 'default';
});

Спасибо, это ясно. А что делать если событие происходит не с этими элементами:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('form').submit( function () { 
	    $("#done").css({cursor: 'default'}).animate({marginLeft:"-200px"}, 300);
		;return false;
	}); 
});
</script>
<style>
#done, #dtwo, #wrapper{width:200px; height:200px; overflow:hidden; float:left;}
#slider{width:400px; height:200px;}
#done{background:#600;cursor:pointer;}
#dtwo{background:#006;cursor:default;}
</style>
</head>
<body>
<div id="wrapper">
	<div id="slider">
			<div id="done">
            	<form name="frm">
					<input name="inp" type="text" />
				</form>
            </div>
			<div id="dtwo"></div>
	 </div>
</div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript