無法觸發懸停在SVG對象標記上

我試圖觸發我的svg動畫時，我將鼠標懸停在<span>上。我不得不在我的對象標籤上使用<span>以使我的<a>能夠工作，但之後我無法激活我的：懸停在我的svg上。無法觸發懸停在SVG對象標記上

我試過所有的方法來使用JavaScript來觸發，但我仍然無法做到這一點。任何想法，如果可能或不可能？

HTML：

<div class="links"> 
<a href="http://www.facebook.com" title="facebook" class="facebook"> 
<span id="fbI"><object class="icon" id="faceb" type="image/svg+xml" data="images/fb.svg"> 
<img src="images/fb.svg" alt="ssRight"/> 
</object></span> 
</a> 
</div>

CSS：

.links a 
{ 
    position: relative; 
    z-index: 1; 
} 

.links a span 
{ 
    display: block; 
    border-bottom: 3px solid white; 
} 

.links a object 
{ 
    display: inline; 
    position: relative; 
    z-index: -1; 
}

的JavaScript：

$('span#fbI').hover(function(e) { 
$('#faceb').trigger('mouseover'); 
})

對象標記SVG編碼：

<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.45 79.45"> 
<defs> 
<style> 
    .cls-1 { 
    fill: #878484; 
    } 

    .cls-2 { 
    fill: #fff; 
    } 

    svg:hover #bg 
    { 
     fill: #205599; 
    } 


</style> 
    </defs> 
    <title>fb</title> 
    <g> 
    <circle id="bg" class="cls-1" cx="39.73" cy="39.73" r="39.73"/> 
    <path id="fb" class="cls-2" d="M-897.51- 494c0,3.22,0,6.43,0,9.65a1,1,0,0,1- 1.2,1.19c-2.27-.05-4.54,0- 6.81,0a0.89,0.89,0,0,1-1.09-1.09c0-6.43,0-12.86,0-19.3,0-1.17,0-1.16-1.16-1.1- 0.85,0-1.7,0-2.55,0a0.58,0.58,0,0,1-.67-0.69c0-2,0-4,0-6.05a0.64,0.64,0,0,1,.8-0.75c0.88,0,1.77,0,2.65,0a0.76,0.76,0,0,0,1-.94,39.91,39.91,0,0,1,.11-5.85,7.72,7.72,0,0,1,7.65-7.07c2.3-.06,4.6-0.07,6.9-0.14a0.79,0.79,0,0,1,1,1c0,1.86,0,3.72,0,5.58a0.66,0.66,0,0,1-.81.81c-1,0-2.08,0-3.12,0-1.83,0-2.54.72-2.76,2.52-0.13,1.07,0,2.14-.08,3.21a0.66,0.66,0,0,0,.82.82c1.64,0,3.28,0,4.92,0,0.7,0,1,.18.87,0.92-0.23,2-.41,3.95-0.57,5.92a0.7,0.7,0,0,1-.83.76c-1.39,0-2.78,0-4.16,0-0.67,0-.94.11-0.91,0.86,0.06,1.64,0,3.28,0,4.92s0,3.22,0,4.82h0Z" transform="translate(940.65 544.4)"/> 
    </g> 
</svg>

[突出顯示的框是跨度框，因爲你可以在我的代碼中看到，一旦我顯示：block;它會覆蓋我的對象標籤，因此無法觸發我的懸停。 ][1]

來源

2017-02-23 Phun Cpjm

您正嘗試觸發'＃faceb'上的鼠標懸停事件，但是您的代碼沒有顯示鼠標懸停上發生了什麼。要測試，用'$（'faceb'）.css（'background'，'red'）;'替換你的第二行，看看是否有任何事情發生。這會告訴你是否正在觸發'.hover'事件。 – Sablefoste

@Sablefoste我已經嘗試過你說的話，懸停事件正在被解僱。我試圖觸發鼠標懸停狀態，因爲我的跨度覆蓋了我的對象，當我將鼠標懸停時，它只能讀取跨度。但在同一時間，我希望我的對象標籤懸停是活躍的，因爲我有一個懸停動畫。 –

嗨有您想要的懸停功能可以通過以下來實現。

$("span#fbI").hover(function() { 
    $('#fbI').css('background','purple') 
});

這是jsfiddle的。我不知道你想要什麼效果，所以我只是把它變成了紫色。

https://jsfiddle.net/qansvs0n/4/

來源

2017-02-23 16:14:49 Morphasis

如果您嘗試在懸停時啓動動畫，可以使用css來完成。使用：svg元素的懸停，動畫播放狀態更改爲運行這樣的例子可以在這裏找到： http://stackoverflow.com/questions/35124550/animating-an-svg -on-hover – Morphasis

我已經嘗試過使用動畫播放狀態來定位對象，它不起作用。我試圖找到一種方法來定位我的對象標記的懸停狀態，以激活由對象標記鏈接的svg中的背景顏色更改。 –

你應該注意到.hover(function_1, function_2)是a shorthand爲

.mouseenter(function_1).mouseleave(function_1)

如果只提供一個參數，它的行爲是這樣的：

.mouseenter(function_1).mouseleave(function_1)

所以你jQuery代碼，現在做什麼是：

火mouseleave事件mouseover上mouseenter事件
火mouseover。

它mouseover s。你想讓它做其他事嗎？因爲除此之外，它什麼也不做。

爲了看到任何變化，您應該在.hover()函數中添加更多代碼，或綁定mouseover事件上的某些內容，您當前在鼠標進入和離開時觸發該事件。

來源

2017-02-23 16:16:04

我只需要爲（faceb）觸發鼠標，因爲svg本身具有：hover動作 –

您應該使用'console.log（「whatever」）'來查看事件是否被觸發。如果是這樣，你應該看看爲什麼你試圖觸發的函數沒有被觸發。看文檔？您尚未提供該部分。 –

我曾試過@Morphasis所說的。背景確實改變了顏色，但我仍然無法觸發懸停聲明，我也不太確定爲什麼。）： –

無法觸發懸停在SVG對象標記上

回答

相關問題