觸發a：通過懸停在另一個上的懸停事件

我有一個jQuery問題;我想通過懸停上的其他觸發元素上的:hover事件，控制檯顯示我的錯誤：觸發a：通過懸停在另一個上的懸停事件

Uncaught RangeError: Maximum call stack size exceeded

這裏是我的JavaScript函數：

$(".love").hover(function() { 
    $(".fa-heart").trigger('mouseover'); 
});

這裏是我的HTML：

        <div class="middle-bar grey-dark"></div> 
             <ol class="container text-center" id="love-inline"> 
              <li> 
               <h2 class="love inline" id="LOVE-left">Nos coups de</h2> 
              </li> 
              &nbsp; 
              <li> 
               <h2 class="love inline" id="heart"><i class="fa fa-heart hvr-pulse-grow"></i></h2> 
              </li> 
              &nbsp; 
              <li> 
               <h2 class="love inline" id="LOVE-right">du moment</h2> 
              </li> 
             </ol> 
            <div class="little-middle-bar grey-dark"></div> 
           <div class="end-bar"></div>

任何想法？

來源

2015-07-03 Nathan Schwarz

僅供參考，您的HTML無效 - 您只能將'li'元素作爲ol的直系後裔。 –

懸停狀態的風格是什麼？ – dfsq

這是類似的問題類似 - http://stackoverflow.com/questions/13325519/jquery-trigger-a-hover-event-from-another-element – Vinay

您所看到的錯誤是因爲你正在引發最初引發的事件，引起遞歸循環的一個的子元素懸停。

更好的方法是使用CSS獨自做到這一點時，無論是家長還是孩子都徘徊：

.love:hover .fa-heart, .fa-heart:hover { 
    border: 2px solid #C00; 
    /* style as needed ... */ 
}

另外，請注意你的HTML是無效的;只有li元素可以是ol的直接後代。

來源

2015-07-03 14:35:00

沒有，因爲在這種情況下，它會觸發css的變化父母，我只想要.fa-heart：懸停被觸發 –

情況並非如此。根據上面的規則，只有'.fa-heart'元素受到影響 –

那麼它不起作用 –

您無法觸發任何元素中的mouseover事件。你一直在觸發mouseover內部的懸停功能，這就是爲什麼它扔RangeError。

爲了解決你的問題，你可以用簡單的CSS規則做到這一點：

.love:hover .fa-heart:hover { 
    color: red; 
}

但看到這仍然沒有道理給我。你可能只是適用於：

.fa-heart:hover { 
    color: red; 
}

來源

2015-07-03 14:32:48

觸發鼠標懸停事件是不一樣的真正的鼠標移到元素，它不會觸發它:hovered狀態。

無論如何，你不需要爲這個JavaScript，因爲簡單的CSS就足夠了：

.love:hover .fa-heart { 
    color: red; 
}

還要確保HTML結構與鋰元素的ol直接孩子有效。

ol li {list-style-type: none; text-align: center;} 
 

 
.love:hover .fa-heart { 
 
    color: red; 
 
}

<link data-require="[email protected]*" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /> 
 

 
<ol class="container text-center" id="love-inline"> 
 
    <li> 
 
     <h2 class="love inline" id="LOVE-left">Nos coups de</h2> &nbsp; 
 
    </li> 
 
    <li> 
 
     <h2 class="love inline" id="heart"><i class="fa fa-heart hvr-pulse-grow"></i></h2> &nbsp; 
 
    </li> 
 
    <li> 
 
     <h2 class="love inline" id="LOVE-right">du moment</h2> 
 
    </li> 
 
</ol>

來源

2015-07-03 14:34:05 dfsq

由於您正在遞歸觸發事件，因此您正面臨這種情況。由於這個無限懸停函數一遍又一遍的調用，因此堆棧溢出。

發生這種情況是因爲您的.fa-heart類在.love類中，並且由於此類調用了父類的懸停事件。

您的問題

的解決方案是e.stopPropagation();使用這個喜歡..

$('.love').hover(function(e) { 
    $('.fa-heart').trigger(e.type); 
    e.stopPropagation(); 

});

正如上面的代碼也沒有奏效。我更多地瞭解代碼並找到正確的解決方案。請檢查解決方案的以下代碼。如果您仍然面臨任何問題，請告訴我。

$('.love').hover(function(e) { 
    if(e.target !== this) { 
    return false; 
    } else { 
     $('.fa-heart').trigger(e.type); 
    } 
});

來源

2015-07-03 14:38:45 Vinay

Check Here - http://stackoverflow.com/questions/13325519/jquery-trigger-a-hover-event- from-another-element – Vinay

但你缺少報價。修復。 –

噢..謝謝Bhojendra .. – Vinay

好吧，這有點棘手;我使用的CSS儘可能多的，你說像這樣：

.fa-heart:hover, .love:hover .fa-heart { 
// css changes 
}

但改變我的HTML作爲這樣使它只有當我將鼠標懸停在文本或發心髒正常工作（因爲你的答案的所有股利hoverabled ）：

<div class="middle-bar grey-dark"></div> 
              <ol class="container text-center" id="love-inline"> 
               <li class="love inline"> 
                <h2 class="love inline" id="LOVE-left">Nos coups de</h2> 
                &nbsp;<h2 class="love inline" id="heart"><i class="fa fa-heart"></i></h2>&nbsp; 
                <h2 class="love inline" id="LOVE-right">du moment</h2> 
               </li> 
              </ol> 
             <div class="little-middle-bar grey-dark"></div> 
            <div class="end-bar"></div>

感謝您的幫助！

來源

2015-07-03 16:14:04

觸發a：通過懸停在另一個上的懸停事件

回答

相關問題