Problem with hover event in Firefox

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 succeed in debugging it.

Regarding solutions:

SOLUTION I:

I would advise you to do this using CSS, in addition to 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'll use a CSS3 that assigns interaction to the element immediately proceeding to the

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 hover event to # work1 then I passed the path to # work2 , adding the selector + between each element.

SOLUTION II:

If you choose to use javascript derivatives, I suggest that 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 first receives the mouseover event and the second classList , in this example it serves as native equivalent of toggleClass but both have a small difference a>.

Notes:

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

Here is a suggestion using only CSS, in this case use div instead of img , in this case it will be important to inform the size of the image, as well as the url of the same direct in 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>

Try this:

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

In jQuery, see working:

link

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

link