Ir ao conteúdo
  • Cadastre-se

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


x5Matheus

Posts recomendados

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>

 

Link para o comentário
Compartilhar em outros sites

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!

Link para o comentário
Compartilhar em outros sites

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.

Link para o comentário
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!