Como fazer uma borda aparecer usando JavaScript?

Estou criando um site e quero que uma borda vermelha apareça ao redor de uma imagem quando o evento de mouseover ocorrer. Como posso configurar isso usando JavaScript ou jQuery?

Resposta

Se você está fazendo um site e quer ter uma borda vermelha aparecendo em torno de uma imagem usando um evento mouseover, você pode fazer isso facilmente usando JavaScript ou jQuery. Veja como configurar isso:

Inclua a biblioteca jQuery em seu cabeçalho, se ainda não estiver incluída.
Adicione o seguinte código CSS em sua seção de estilo para criar a transição suave da borda:
Em seguida, adicione uma classe à sua imagem para aplicar a borda e o efeito hover:

<img src="caminho-para-sua-imagem.jpg" class="imagem-com-borda" />

Faça a ligação do comportamento hover da imagem à classe CSS utilizando jQuery:

$("img.imagem-com-borda").hover(
  function() {
    $(this).addClass("imagem-com-borda-hover");
  },
  function() {
    $(this).removeClass("imagem-com-borda-hover");
  }
);

Com esses passos, você terá uma borda vermelha aparecendo em torno de sua imagem quando o mouse passar por cima dela. Isso dará ao seu site uma interação visual agradável, sem a necessidade de recarregar a página. Esperamos que este guia tenha sido útil para você!