Форум

ethereal · #1 (**permalink**) 12.03.2020, 02:56

Здравствуйте! Подскажите, подcкажите как сделать на JS при наведение на блок, hover срабатывал только если курсор находится над ним больше секунды?

Спасибо!

рони · #2 (**permalink**) 12.03.2020, 07:30

ethereal,
transition-delay

ethereal · #3 (**permalink**) 12.03.2020, 16:49

Да нет. Нужно на JS по такому примеру

$( "td" ).hover(
  function() {
    $( this ).addClass( "hover" );
  }, function() {
    $( this ).removeClass( "hover" );
  }
);

Функция addClass должна сработать если курсор находится над блоком больше секунды.

рони · #4 (**permalink**) 12.03.2020, 17:13

ethereal,
что не так?

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  td:hover{
      transition: .5s 1s;
      background-color: #FF0000;
  }

  </style>

</head>
<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
</body>
</html>

voraa · #5 (**permalink**) 12.03.2020, 19:50

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

Функция addClass должна сработать если курсор находится над блоком больше секунды.

Ставь timeout
Как то так

let timer = 0;
$( "td" ).hover(
  function() {
    timer = setTimout (() => {
      clearTimeout(timer);
      timer = 0;
      $( this ).addClass( "hover" );
    }, 1000)
  }, function() {
    if (timer) clearTimeout(timer);
    timer = 0;
    $( this ).removeClass( "hover" );
  }
);

рони · #6 (**permalink**) 12.03.2020, 20:35

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

setTimout

как-то так ...

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hover{
      background-color: #FF0000;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
let timer;
$( "td" ).hover(
  function() {
    clearTimeout(timer);
    timer = setTimeout (() => {
      $( this ).addClass( "hover" );
    }, 1000)
  }, function() {
    clearTimeout(timer);
    $( this ).removeClass( "hover" );
  }
);

});
  </script>
</head>
<body>
<table width="400" summary="" >
	<thead>
		<tr>
			<th>Title 1</th>
			<th>Title 2</th>
			<th>Title 3</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Cell 1.1</td>
			<td>Cell 1.2</td>
			<td>Cell 1.3</td>
		</tr>
		<tr>
			<td>Cell 2.1</td>
			<td>Cell 2.2</td>
			<td>Cell 2.3</td>
		</tr>
	</tbody>
</table>
</body>
</html>

или так ...

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    .hover{
            background-color: #FF0000;
    }

    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script>
$(function() {
$( "td" ).on("mouseleave  mouseenter",
    function(event) {
        clearTimeout(this.timer);
        if(event.type === "mouseenter")
        this.timer = setTimeout (() => {
            $( this ).addClass( "hover" );
        }, 1000);
        else $( this ).removeClass( "hover" );
    }
);

});
    </script>
</head>
<body>
<table width="400" summary="" >
    <thead>
        <tr>
            <th>Title 1</th>
            <th>Title 2</th>
            <th>Title 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1.1</td>
            <td>Cell 1.2</td>
            <td>Cell 1.3</td>
        </tr>
        <tr>
            <td>Cell 2.1</td>
            <td>Cell 2.2</td>
            <td>Cell 2.3</td>
        </tr>
    </tbody>
</table>
</body>
</html>

Malleys · #7 (**permalink**) 13.03.2020, 00:25

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

Да нет. Нужно на JS по такому примеру

Не нужно, вам стоит всего-то переименовать селектор td.hover в td:hover и добавить всего одно объявление transition-delay. (чтобы сработало только тогда, когда, как вы пишете «только если курсор находится над ним больше секунды»)

td:hover {
	/* указывает, что стили применяются через 1 сек. */
	transition-delay: 1s;
	
	/* здесь идут стили, которые были определены в td.hover */
	background: red;
}

Вам не нужно самостоятельно добавлять класс hover, так как псевдо-класс hover автоматически добавляется на любой элемент при взаимодействии с мышью или касании сенсорного экрана!

Используйте псевдо-классы себе на пользу, а не боритесь с ними! (Итого — хорошо читаемый и понятный код)

Форум

Справочник

Discord чат

Курсы javascript