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

为什么要将<a>标记放在<img>之外？

应该这样放置：

<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>

悬停不适用于Firefox

3 个答案: