的MouseEnter /鼠標離開SVG的使用和jQuery

我建立我的菜單與SVG圖片的網站，我有一個jQuery的和probleme MouseLeave事件..的MouseEnter /鼠標離開SVG的使用和jQuery

這是我的HTML/CSS：

<div style="display:none;"> 
    <svg id ="home-icon" viewBox="0 0 64 64"> 
     <path d="M57.0 <!-- .. SVG source Here ... --> 98z"/> 
    </svg> 
</div> 
<ul id="top-menu"> 
    <li class="menu-icon"> 
     <svg><use xlink:href="#home-icon" /></svg> 
    </li> 
</ul> 
.menu-icon svg{ 
    fill: #AB1; 
    width:64px;height:64px; 
} 
.menu-icon.active svg{ 
    background: #AB1; 
    stroke: #e8e8e8;stroke-width: 2px; 
}

而jQuery的：

$('.menu-icon').mouseenter(function(){ 
    $(this).addClass('active'); 
}).mouseleave(function(){ 
    $(this).removeClass('active'); 
});

-> Code here <-

但是，當鼠標在在我的li.menu-icon上有一個觸發器'mouseleave'。我準備好了，不明白爲什麼？！

謝謝大家的閱讀和幫助！

來源

2014-03-01 Arthur

爲什麼不你使用用戶交互僞類'：hover'？ –

這是一個更復雜代碼的簡單例子。我使用：懸停的CSS，但我需要得到這些信息jQuery的其他行動：/ – Arthur

當我們使用<svg><use ..我們不SVG其實複製到我們的容器節點。所以我們實際上是觸發mouse out

見http://jsfiddle.net/8RCyD/5/ - 更新了最新版本的jQuery從@Erik鏈接，討論解決的跨瀏覽器的差異，感謝

我們能

$(".menu-icon").append("#menu-icon"); /* the svg we want */

。。然後...

$('.menu-icon').mouseenter(function(){ 
    $(this).addClass('active'); 
}).mouseleave(function(){ 
    $(this).removeClass('active'); 
});

來源

2014-03-01 20:27:14

我不確定在什麼情況下你嘗試過，但你發佈的鏈接不適合我，它確實有OP的問題。 –

它適用於我和init循環誰克隆所有svg： http://jsfiddle.net/R9aeu/4/ – Arthur

所有好@CactOos？ –

相反的jQuery的，你可以只使用純CSS：

.menu-icon:hover svg { 
    background: #AB1; 
    stroke: #e8e8e8; 
    stroke-width: 2px; 
}

Updated Fiddle

來源

2014-03-01 20:21:34 Felix

我怎麼說國王的回覆：「\t這是一個簡單的例子，更復雜的代碼我使用：懸停的CSS，但我需要得到這些信息在jQuery的其他行動：/「 – Arthur

我遲到了派對在這裏，但最近遇到了這個問題，並沒有興趣過分複雜化我的jQuery，以防止mouseleave當指針在SVG圖標上。我發現，如果它應用到SVG的CSS屬性

pointer-events: none;

可以解決這個問題 - 其實，物業是SVG建議的一部分，專門用於類似的情況：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

來源

2014-04-30 15:13:37 Marcatectura

是的！這是一個。謝謝 –

的MouseEnter /鼠標離開SVG的使用和jQuery

回答

相關問題