Em relação ao bug:
Pode ser algo da biblioteca Jquery em si, algo do navegador, ou algo no seu código que ocasionou o erro, são muitas as possibilidade e para encontrar a solução desse código você ira conseguir apenas debugando o mesmo.
Em relação as soluções:
SOLUÇÃO I:
Aconselho a fazer esse efeito utilizando CSS, além de ser a função dele fazer esse tipo de interação, você evita fazer duas manipulações diretamente no DOM com Jquery, economizando memória.
Nesse caso você utilizará um seletor CSS3 que atribui interação ao elemento imediatamente procedido a ele representado pelo sinal de soma (+).
Exemplo:
/*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>
Explicação:
Copiei seu HTML e com CSS atribui o evento de hover ao #work1 depois passei o caminho até chegar ao #work2, adicionando o seletor + entre cada elemento.
SOLUÇÃO II:
Caso opte por fazer utilizando derivados de javascript, sugiro que utilize o seguinte código:
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>
Explicação:
Seleciono os elementos utilizando o querySelector, onde o primeiro recebe o evento de mouseover e o segundo a classList, nesse exemplo ela serve como equivalente nativo do toggleClass porém os dois têm uma pequena diferença.
Observações:
- Caso opte por fazer com CSS, tente utilizar o seletor para elementos diretamente seguidos, ou seja, retirando o elemento
<a>
entre eles para evitar autos níveis de especificidade de seletores.
- Para o elemento
<img>
lembre-se de adicionar valor ao atributo alt o mesmo é importante para SEO e acessibilidade e ao final você pode retirar a barra (/) antes do fechamento da tag, se você estiver utilizando HTML5.
- Para o caso da solução em javascript, você pode alterar diretamente
o valor do src, sem ter que utilizar a classe "tone", substituindo
o classList por .src="caminho da imagem". Exemplo:
document.querySelector('#work2').src="/images/click.svg";
.attr('style','background:url(/images/click.svg)')
... mas o importante é funcionar, certo.