Ir para conteúdo

xDenisX

Members
  • Total de itens

    5
  • Registro em

  • Última visita

Reputação

0 Comum

Sobre xDenisX

  1. Eae pessoal tudo bem ? Seguinte estou aprendendo CSS, e fiz um menu um pouco animado. Ao passar a mouse sobre um Li ela mostra seus componentes com uma animação e delays diferentes. Meu problema é o seguinte, quando eu tiro o Mouse, os delays ainda acontecem deixando assim uma animação bem "Feia". Eu queria que ao tirar o mouse os itens voltassem ao mesmo tempo sem delay alguém pode me ajudar ? ( mais uma pergunta, estou aprendendo CSS3 e logo logo começo estudar JavaScript sabem me dizer se conseguria fazer animações como essa utilizando JavaScript mais facilmente ? ) Obrigado pela atenção o código esta abaixo <!doctype html> <html> <head> <meta charset="utf-8"> <title>Menu deslizante</title> <style> .container{ height: 500px; width: 200px; padding: 0px; overflow: hidden; } .menu{ width: 200px; font-family: Segoe, Segoe UI, DejaVu Sans, Trebuchet MS, Verdana," sans-serif"; color:whitesmoke; font-size: 13pt; } .menu ul{ list-style: none; position: relative; padding: 0px; } .menu ul ul { padding: 0; position:absolute; transform: translateX(200px); } .menu ul li:hover ul{ position: relative; transition:2s; } .menu ul li:nth-child(1){ transition:0.25s; } .menu ul li:hover ul li:nth-child(1){ transform: translateX(-190px); } .menu ul li:nth-child(2){ transition:0.25s; transition-delay: 0.25s; } .menu ul li:hover ul li:nth-child(2){ transform: translateX(-190px); } .menu ul li:nth-child(3){ transition:0.25s; transition-delay: 0.5s; } .menu ul li:hover ul li:nth-child(3){ transform: translateX(-190px); } .menu li{ padding: 15px; cursor: pointer; background-color: rgba(188,27,30,1.00); border-bottom: rgba(229,79,82,1.00) solid 1px; } </style> </head> <body> <div class="container"> <nav class="menu"> <ul> <li>Home</li> <li>Galeria</li> <li>Shop <ul> <li>Cell Cases</li> <li>Notebook Acessories</li> <li>To your House</li> </ul> </li> <li>Contacts</li> <li>About us</li> </ul> </nav> </div> </body> </html>
  2. xDenisX

    Adicionar borda ao objeto sem mover o objeto ao lado

    Pessoal muito obrigado. Realmente era isso mesmo, muito simples a solução, porem fiquei pensando em coisas mais complexas até adicionei overflow, mas ainda não tinha me dado o resultado desejado. Agradeço pela ajuda pois com vocês cheguei no resultado esperado. Obrigado !!!
  3. Olá pessoal tudo bem ? Gostaria de adicionar uma borda a um objeto passando o mouse em cima do mesmo usando o parâmetro hover sem que alterasse a posição dos outros ao lado ( sem ficar tremendo o layout) abaixo está o código. Alguém consegue me dar uma ajuda ? <html> <head> <title></title> <style type="text/css"> .quadrado{ width: 100px; height: 100px; background-color: grey; display: inline-block; margin:2px; } #container{ width: 320px; } .quadrado:hover{ border: 4px solid black; box-sizing: border-box; } </style> </head> <body> <div id="container"> <div class="quadrado">Primeiro</div> <div class="quadrado">Segundo </div> <div class="quadrado">Terceiro </div> <div class="quadrado">Quarto</div> <div class="quadrado">Quinto</div> <div class="quadrado">Sexto</div> <div class="quadrado">Sétimo</div> <div class="quadrado">Oitavo</div> <div class="quadrado">Nono</div> </div> </body> </html>
  4. xDenisX

    Mudar classe css3 de div usando JavaScript

    Hey Matheus obrigado. Estou começando agora então estou dando uns tropeços. Muito obrigado pelo material e pelos exemplos me ajudou muito você é o cara !. Abraços !!
  5. xDenisX

    Mudar classe css3 de div usando JavaScript

    Olá pessoal, estou com uma dúvida, já pesquisei mas não encontrei nenhuma solução. Quero trocar a classe de uma div em css3 por meio de JavaScript. Por exemplo eu clico em um botão e o mesmo chama uma função em JavaScript que vai mudar a classe design1 para a classe design2 desta div. Abaixo esta o código feito. alguém poderia me ajudar ? Obrigado. <html> <head> <title></title> </head> <style type="text/css"> .design1{ background-color: blue; width: 200px; height: 200px; margin-bottom: 30px; } .design2{ background-color: yellow; width: 250px; height: 250px; margin-bottom: 30px; } </style> <script type="text/javascript"> function mudarClasse(){ document.getElementById("quadrado").style./****Não sei oque colocar aqui para mudar a classe*****/; } </script> <body> <div class="design1" id="quadrado"></div> <input type="button" name="botao" value="Mudar de classe" onclick="mudarClasse()"> </body> </html>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.