Javascript 悬停在Firefox中不起作用

在Chrome、Safari和Opera中，第一个图像中的悬停会改变第二个图像，但在Firefox中不起作用

HTML

JAVASCRIPT

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

感谢您的帮助。

使用以下css：

#work1{
   cursor:pointer;
 }

 #work2{
   cursor:pointer;
 }

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

您为什么要使用

---

其中现在有了ID。

这里应该可以满足您的需要

$（函数（）{
$（'#work1'）。悬停（函数（）{
console.log（'hover'）；
$（“#工作2”）。切换类别（“音调”）；
});
})

#工作1{
显示：内联块；
高度：300px；
宽度：300px；
光标：指针；
}
#工作2{
显示：内联块；
高度：300px；
宽度：300px；
光标：指针；
}
#工作音{
背景图像：url（'http://placehold.it/200x200")重要,；
背景重复：无重复；
}

这是否适用于chrome。我不认为你的css-syntex是错的。您不能使用

&.tone

是的，这在chrome、safari和Operate上很管用谢谢您的回答，但不幸的是在firefox中仍然不管用。那么可能是您在FF中禁用了javascript。content属性只应在：before和：after伪元素（）中使用。您可以将图像设置为背景图像。谢谢您的回答。我找到了它并开始工作：$（'#work1'）.hover（function（）{$（'#work2'）.attr（“src”），“/images/click.svg”）；}，function（）{$（'#work2'）.attr（“src”，“/images/winter.jpg”）；}）；

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

#work1{
   cursor:pointer;
 }

 #work2{
   cursor:pointer;
 }

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

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

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