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.

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>

Entrar

x5Matheus

Posts

Cadastrado em

Última visita

Tipo de conteúdo

Artigos

Selos

Fabricantes

Livros

Cursos

Análises

Fórum

posts postados por x5Matheus

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

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

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos