Pessoal, vocês podem me ajudar, eu estou a um tempo tentando fazer isso mas não consigo, eu não tenho muito conhecimento em JavaScript. Eu queria aplicar um efeito de mouseenter em div's com borda e mudar de color um paragrafo ao mesmo tempo. eu queria fazer isso muitas div's mas não consigo pegar todos elementos usando a mesma classe em JavaScript. Alguém poderia me ajudar, por favor.
Vou colocar um código simples aqui, só de exemplo para vocês verem como eu estou fazendo.
OBRIGADO.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background: grey;
margin: 0 auto;
}
h1 {
text-align: center;
}
#border1 {
width: 220px;
height: 150px;
text-align: center;
background: rgb(0, 158, 158);
border-radius: 8px;
border: 2px solid transparent;
cursor: pointer;
}
#border2 {
width: 220px;
height: 150px;
text-align: center;
background: cadetblue;
border-radius: 8px;
border: 2px solid transparent;
}
p {
font: normal 13pt arial;
max-width: 180px;
cursor: pointer;
}
#flex {
display: flex;
max-width: 800px;
align-items: center;
margin: 0 auto;
</style>
</head>
<body>
<h1>Border Select</h1>
<section id="flex">
<div id="border1">
<p id="parag">Lorem ipsum dolor sit amet lore consectetur adipisicing elit. </p>
</div>
<div id="border2">
</div>
<p id="parag">Lorem ipsum ip dolor sit, amet consectetur adipisicing elit.</p>
</section>
<script>
var a = window.document.getElementById('border1')
var b = window.document.getElementById('parag')
a.addEventListener('mouseenter', selecionar)
a.addEventListener('mouseout', sair)
b.addEventListener('mouseenter', selecionar)
b.addEventListener('mouseout', sair)
function selecionar() {
a.style.border = '2px solid #63029b'
b.style.color = '#63029b'
}
function sair() {
a.style.border = '2px solid transparent'
b.style.color = 'black'
}
</script>
</body>
</html>