Эмуляция зависания над элементом

Question

Я пытаюсь подражать зависанию над элементом с помощью мыши, используя jQuery.

Это отличие от добавления :hover к элементу; Я хочу что-то подобное в функции использовать $(element).click(), однако делать $(element).hover() не работает для меня.

Элемент, о котором идет речь, является (насколько я могу видеть) с помощью jQuery UI datepicker с подсказкой при наведении курсора; для живого примера см. an AirBnB listing, щелкните вкладку календаря «даты» с правой стороны и наведите указатель мыши на доступную дату.

Я хочу, чтобы вызвать зависать над каждой доступной даты, чтобы получить цену парить выше, хотя делать:

$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)').each(function(){ 
    $(this).hover() 
}) 

или просто

$('.ui-datepicker.ui-widget .ui-datepicker-calendar:eq(0) tbody tr td:not(.ui-datepicker-unselectable)')[0].hover() 

не работает для меня, и не используя mouseover(). Любая идея, как я могу воспроизвести это поведение?

Answer 1

Вы должны попробовать trigger -ную событие:

$("element").trigger('mouseenter'); 

Также посмотрите на эту post on SO, очень похож на ваш.

Answer 2

Ну, вы можете сделать это только с помощью CSS, вот упрощенный пример:

.td-hover td { 
 
    position: relative; 
 
    width: 1em; 
 
    border: 1px solid #ddd; 
 
} 
 
.on-hover { 
 
    display: none; 
 
    position: absolute; 
 
    top: -1.5em; 
 
    left: -1em; 
 
    background: #eee; 
 
    border: 1px solid black; 
 
} 
 
.td-hover td:hover .on-hover { 
 
    display: inline-block; 
 
}

<table class="td-hover"> 
 
    <tbody> 
 
    <tr> 
 
     <td>1<span class="on-hover">one</span></td> 
 
     <td>2<span class="on-hover">two</span></td> 
 
     <td>3<span class="on-hover">three</span></td> 
 
     <td>4<span class="on-hover">four</span></td> 
 
     <td>5<span class="on-hover">five</span></td> 
 
     <td>6<span class="on-hover">six</span></td> 
 
     <td>7<span class="on-hover">seven</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>8<span class="on-hover">eight</span></td> 
 
     <td>9<span class="on-hover">nine</span></td> 
 
     <td>10<span class="on-hover">ten</span></td> 
 
     <td>11<span class="on-hover">eleven</span></td> 
 
     <td>12<span class="on-hover">twelve</span></td> 
 
     <td>13<span class="on-hover">thirteen</span></td> 
 
     <td>14<span class="on-hover">fourteen</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Но если вы настаиваете на использовании JavaScript вместо этого, просто использовать JQuery-х hover, чтобы добавить/удалить класс:

$(".td-hover td").hover(
 
    function() { 
 
    $(this).find(".on-hover").addClass("showing"); 
 
    }, 
 
    function() { 
 
    $(this).find(".on-hover.showing").removeClass("showing"); 
 
    } 
 
);

.td-hover td { 
 
    position: relative; 
 
    width: 1em; 
 
    border: 1px solid #ddd; 
 
} 
 
.on-hover { 
 
    display: none; 
 
    position: absolute; 
 
    top: -1.5em; 
 
    left: -1em; 
 
    background: #eee; 
 
    border: 1px solid black; 
 
} 
 
.on-hover.showing { 
 
    display: inline-block; 
 
}

<table class="td-hover"> 
 
    <tbody> 
 
    <tr> 
 
     <td>1<span class="on-hover">one</span></td> 
 
     <td>2<span class="on-hover">two</span></td> 
 
     <td>3<span class="on-hover">three</span></td> 
 
     <td>4<span class="on-hover">four</span></td> 
 
     <td>5<span class="on-hover">five</span></td> 
 
     <td>6<span class="on-hover">six</span></td> 
 
     <td>7<span class="on-hover">seven</span></td> 
 
    </tr> 
 
    <tr> 
 
     <td>8<span class="on-hover">eight</span></td> 
 
     <td>9<span class="on-hover">nine</span></td> 
 
     <td>10<span class="on-hover">ten</span></td> 
 
     <td>11<span class="on-hover">eleven</span></td> 
 
     <td>12<span class="on-hover">twelve</span></td> 
 
     <td>13<span class="on-hover">thirteen</span></td> 
 
     <td>14<span class="on-hover">fourteen</span></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>