Как поставить таймер на hover?
Здравствуйте! Подскажите, подcкажите как сделать на JS при наведение на блок, hover срабатывал только если курсор находится над ним больше секунды?
Спасибо! |
ethereal,
transition-delay |
Да нет. Нужно на JS по такому примеру
$( "td" ).hover( function() { $( this ).addClass( "hover" ); }, function() { $( this ).removeClass( "hover" ); } ); Функция addClass должна сработать если курсор находится над блоком больше секунды. |
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> |
Цитата:
Как то так 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" ); } ); |
Цитата:
<!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> |
Цитата:
td:hover { /* указывает, что стили применяются через 1 сек. */ transition-delay: 1s; /* здесь идут стили, которые были определены в td.hover */ background: red; } Вам не нужно самостоятельно добавлять класс hover, так как псевдо-класс hover автоматически добавляется на любой элемент при взаимодействии с мышью или касании сенсорного экрана! Используйте псевдо-классы себе на пользу, а не боритесь с ними! (Итого — хорошо читаемый и понятный код) |
Часовой пояс GMT +3, время: 10:37. |