Problem with Hover event in Firefox

Question

The following code is to use the event Hover in the first image and change the class of the second. But after testing, it did not work in the Firefox browser, working only in Chrome, Safari and Opera browsers.

Below is an example of the code:

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

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

JAVASCRIPT

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

What would be the solutions to this malfunction?

Answer 1

Regarding the bug:

It may be something from the Jquery library itself, something from the browser, or something in your code that caused the error, there are many possibilities and to find the solution of this code you will only be able to debug it.

---

Regarding the solutions:

SOLUTION I:

I advise to do this effect using CSS, besides being the function of it to do this type of interaction, you avoid doing two manipulations directly in the DOM with Jquery, saving memory.

In this case you will use a selector CSS3 that assigns interaction to the element immediately proceeding to it represented by the sum signal (+).

Example:

/*Style default*/
img {
  border: 1px solid black;
  height: 100px;
  width: 100px;
}


/* Seletor e exemplo de interação */
#work1:hover + a + #work2 {
  border-color: red;
}

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

Explanation:

I copied your HTML and with CSS assigns the event from Hover at the #work1 then I passed the path until I reached the #work2, adding the selector + between each element.

SOLUTION II:

If you choose to do so using derivatives from javascript, I suggest you use the following code:

document.querySelector('#work1').addEventListener('mouseover', function(){
  document.querySelector('#work2').classList.add('tone');
});
document.querySelector('#work1').addEventListener('mouseout', function(){
  document.querySelector('#work2').classList.remove('tone');
});

img {
 border: 1px solid black;
 height: 100px;
 width: 100px;
}
img.tone {
  border-color: red;
}

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

Explanation:

I select the elements using the querySelector, where the former hosts the mouseover and the second to classList, in this example it serves as the native equivalent of toggleClass but the two have a small difference.

---

Remarks:

• If you choose to do it with CSS, try using the selector for directly followed elements, i.e., removing the element <a> between them to avoid autos levels of specificity of selectors.
• For the element <img> remember to add value to attribute alt the same is important for SEO and accessibility and at the end you can remove the bar (/) before closing the tag, if you are using HTML5.
• In the case of javascript, you can change directly the value of src, without having to use the "tone" class, replacing the classList for .src="image path". Example: document.querySelector('#work2').src="/images/click.svg";

Answer 2

Follow a suggestion using CSS only, in this case use a div instead of a img, in this case it will be important to inform the image size as well as the url of the same right in the CSS.

.img {
  width: 256px;
  height: 256px;
  background-color: whitesmoke;
  background-repeat: no-repeat;
  border: 1px solid gainsboro; 
  border-radius: 10px;

  transition-property: background-image;
  transition-duration: 0.5s;
  transition-timing-function: linear;
}

.img {    
  background-image: url('http://cdn.flaticon.com/png/256/97199.png');

}

.img:hover {  
  background-image: url('http://cdn.flaticon.com/png/256/63511.png');
}

<div class="img"></div>

Answer 3

Try it like this:

$( '#work1' ).hover(
  function() {
    $( '#work2' ).attr("src", "/images/click.svg" );
  }, function() {
    $( '#work2' ).attr("src", "/images/winter.jpg" );
  }
);

In jQuery, see working:

http://jsfiddle.net/ivanferrer/mx0c65n4/

To make in css is very simple, see this example:

http://jsfiddle.net/ivanferrer/da32dvnf/