Emulate über ein Element emulieren

Question

Ich versuche, den Mauszeiger über ein Element mit jQuery zu emulieren.

Dies unterscheidet sich von dem Hinzufügen :hover zu dem Element; Ich möchte etwas ähnliches in der Funktion zu verwenden $(element).click(), aber tun $(element).hover() funktioniert nicht für mich.

Das fragliche Element ist (soweit ich das sehen kann) die jQuery UI Datepicker mit einem Tooltip auf Hover; Für ein Livebeispiel, siehe an AirBnB listing, klicken Sie auf den Kalendereintrag "dates" auf der rechten Seite und bewegen Sie den Mauszeiger über ein verfügbares Datum.

Ich möchte den Mauszeiger über jeden verfügbaren Zeitpunkt auszulösen, den Preis zu erhalten, oben zu schweben, obwohl tun:

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

oder einfach

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

nicht für mich arbeiten, noch hat mit mouseover(). Irgendeine Idee, wie ich dieses Verhalten replizieren kann?

Answer 1

Sie trigger versuchen sollte das Ereignis -ing:

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

Schauen Sie auch in diesem post on SO, sieht bei Ihnen sehr ähnlich.

Answer 2

Nun, Sie dies mit CSS nur tun können, ist hier ein vereinfachtes Beispiel:

.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>

Aber wenn Sie JavaScript auf anstelle bestehen, verwenden Sie einfach die jQuery hover hinzufügen/entfernen einer Klasse:

$(".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>