Javascript Aplicar efeito em todos elementos, usado a mesma class com JavaScript

x5Matheus · 24 de agosto de 2020

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>

Will871 · 24 de agosto de 2020

Olá, amigo!
Boa noite!
Vamos lá ... Você cometeu alguns erros durante a tarefa, vou listar pra você eles e as possíveis soluções que pode tomar.
1º - ids duplicados.
- Os ids só podem ser declarados uma vez, ele serve para identificar o elemento (id = "identificador"), sendo assim ele precisa ser único! (Isso literalmente é um erro, se abrir o console do navegador verá que o mesmo te notifica sobre)
2º - Uso do javascript.
- Você não precisa usar javascript para fazer isso, o próprio CSS pode fazer pra você! Vou te mostrar como ...

section#flex div p:hover {
  border: 2px solid #63029b;
  color: #63029b;
}

- Procure manter o javascript mais para processos, estilos tente ao máximo utilizar o CSS, se aprender a usar ele certinho terá tudo que precisa, o máximo que precisará no javascript é adicionar uma simples class para aplicar o efeito desejado!
3º - Organização dos elementos.
- Esse aqui é mais por conta do item 2, quando seus elementos são organizados de forma adequada, trabalhar tanto com CSS quanto javascript se torna muito mais fácil, então estude a parte de organizar o HTML e procure entender melhor o que cada atributo faz, assim conseguirá evitar qualquer erro que possa aparecer!

Vamos considerar que você tem 3 coisas fundamentais para aprender, e elas precisam ser respeitadas ou acabará se atropelando!
Foca em dominar o HTML, depois o CSS e ai quando estiver tudo bem certinho entre em javascript.
Um facilita o outro, e no fim perceberá que é tudo muito tranquilo, nem precisará de muito tempo para aprender, vejo que está indo no caminho certo, só precisa focar em um por vez.
Boa sorte, amigo!
Bons estudos!
Obs: tem a possibilidade daquele CSS ali estar meio incorreto, eu não testei nem nada, então qualquer coisa me fale aqui e assim que der eu testo e coloco um certinho pra você ter como referência!

x5Matheus · 25 de agosto de 2020

Boa noite, obrigado por responder.

Eu mandei o código errado, eu tinha feita primeiramente em class mesmo, porém não consegui, ai coloquei id só pra teste. Mas o meu problema é que eu queria que a borda e o texto mudasse de cor na mesma hora,não um ou outro, entendeu? Difícil explicar por aqui hahahah.