懸停在Firefox中不起作用

Question

在第一張圖片中懸停更改Chrome，Safari和Opera中的第二張圖片，但在Firefox中不起作用。

HTML

<img id="work1" src="/images/summer.jpg" alt="" width= /><a href="#um"></a> 
<img id="work2" src="/images/winter.jpg" alt="" width= /><a href="#um"></a> 

CSS

#work1{ 
    cursor:pointer; 
} 

#work2{ 
    cursor:pointer; 
    &.tone{content:url(/images/click.svg);} 
} 

JAVASCRIPT

$('#work1').hover(function(){ 
    $("#work2").toggleClass("tone"); 
}); 

感謝您的幫助。

Answer 1

使用下面的CSS：

#work1{ 
    cursor:pointer; 
} 

#work2{ 
    cursor:pointer; 
} 

#work2.tone{ 
    content:url(/images/click.svg); 
} 

Answer 2

爲什麼有<img>外<a>標籤？

應該放在這樣的：

<a href="#um" id="work1"><img src="/images/summer.jpg" alt=""/></a> 

<a href="#um" id="work2"><img src="/images/winter.jpg" alt=""/></a> 

現在在哪裏，這已在標識。

Answer 3

這裏應該適合您的目的。

$(function() { 
 
    $('#work1').hover(function() { 
 
     console.log('hover'); 
 
     $("#work2").toggleClass("tone"); 
 
    }); 
 
})

#work1 { 
 
    display: inline-block; 
 
    height: 300px; 
 
    width: 300px; 
 
    cursor:pointer; 
 
} 
 
#work2 { 
 
    display: inline-block; 
 
    height: 300px; 
 
    width: 300px; 
 
    cursor:pointer; 
 
} 
 
#work2.tone { 
 
    background-image: url('http://placehold.it/200x200') !important; 
 
    background-repeat: no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="work1"><img src="http://placehold.it/300x300" alt="" /></a> 
 
<a href="#" id="work2"><img style="background-image: url('http://placehold.it/300x300')" alt="" /></a>