使用javascript訪問內聯SVG元素

什麼即時通訊設法當你把鼠標懸停在svg元素上，它會導致另一個出現。

我的想法是使用javascript來添加和刪除一個「隱藏」類，當你懸停，但它不工作，它在沒有SVG元素的工作，但我不明白爲什麼它不在這裏工作。

<svg xmlns:cc="http://web.resource.org/cc/" 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    width="400px" 
    height="400px" 
    viewBox="0 150 960 900"> 
<path id="loc36" class="maploc" d="m 352.28954,738.20354 0,140.66609 85.8653,0 0,-140.41399 z"/> 
<path id="info36" class="infopanel " d="m 306.42857,896.64787 0,157.85713 539.28572,0 0,-158.57141 z"/> 
</svg>

的Javascript

$("#loc36").hover(function(){ 
     $('#info36').removeClass('hidden'); 
    },function(){ 
     $('#info36').addClass('hidden'); 
    });

https://jsfiddle.net/atprsteq/

其作品上沒有任何SVG元素，像這樣的例子 http://jsfiddle.net/EzfwV/210/

我只思念的東西在這裏簡單嗎？

來源

2016-02-16 Rigas

我試圖讓這個工作在Wordpress頁面上，它現在在jfiddle上工作，但不在Wordpress上。 Jquery的加載不知道發生了什麼。 – Rigas

jsFiddle將代碼包裝在onload處理函數中。你在WordPress做類似的事情嗎？控制檯中有任何錯誤？ – gilly3

我想出了答案，原來我有另一個技術上與我正在測試的元素重疊的元素，所以當然這個onhover不會觸發。 – Rigas

我在這裏只是錯過了一些簡單的東西嗎？

是的。

screenshot of error message

你忘了包括jQuery的！

screenshot of javascript settings

jQuery的選擇從「框架&擴展」菜單。

來源

2016-02-16 17:11:38 gilly3

Stackoverflow不會讓我發佈鏈接到jsfiddle，而不包括我的答案中的代碼。由於沒有可以更改的代碼，但只需改變一個jsfiddle設置，我會在評論中提供鏈接：[jsfiddle.net/gilly3/atprsteq/1](https://jsfiddle.net/gilly3/atprsteq/ 1 /） – gilly3

謝謝，我是我似乎是一個白癡。我在Wordpress頁面上構建它，所以我不知道如何在那裏複製它; / – Rigas

使用javascript訪問內聯SVG元素

回答

相關問題