Наведение не работает в Firefox

Наведение на первое изображение изменяет второе изображение в 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);}
 }

ЯВАСКРИПТ

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

Спасибо за помощь.


javascript jquery css hover toggleclass
person costinha    schedule 27.10.2015    source источник
comment
Это работает на хроме. Я не думаю, что ваш синтаксис css неверен. Вы не можете использовать &.tone   -  person Manwal    schedule 27.10.2015
comment
да это работает на хроме, сафари и опере   -  person costinha    schedule 27.10.2015

Ответы (3)


arrow_upward
0
arrow_downward

Используйте следующий css:

#work1{
   cursor:pointer;
 }

 #work2{
   cursor:pointer;
 }

#work2.tone{
    content:url(/images/click.svg);
}
person Manwal    schedule 27.10.2015
comment
Спасибо за ответ, но, к сожалению, все еще не работает в Firefox. - person costinha; 27.10.2015
comment
Тогда, возможно, вы отключили javascript в FF. - person Manwal; 27.10.2015
comment
Атрибут содержимого следует использовать только в псевдоэлементах :before и :after (developer.mozilla.org/en-US/docs/Web/CSS/content). Вместо этого вы можете установить изображение в качестве фонового изображения. - person F. Müller; 27.10.2015

arrow_upward
0
arrow_downward

Здесь это должно работать для вашей цели.

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

person F. Müller    schedule 27.10.2015
comment
Спасибо за ответ. я нашел это и работал: $( '#work1' ).hover( function() { $( '#work2' ).attr(src, /images/click.svg ); }, function() { $( '# work2' ).attr(src, /images/winter.jpg ); } ); - person costinha; 27.10.2015

arrow_upward
0
arrow_downward

Зачем иметь тег <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>

Где теперь как удостоверения личности.

person Hayder    schedule 27.10.2015