Jump to content
  • 0
Leo_Lôbo

como adiciono uma nova class no seguinte codigo, por mais que eu tente não da certo!

Question

<style>
     .nnClass {
     background-color: black;
     color: white;
}
</style>
 
<div class="f_d">33</div>
<div class="f_d">24</div>
<div class="f_d">49</div>
<div class="f_d">55</div>
<div class="f_d">66</div>
<div class="f_d">62</div>
<div class="f_d">53</div>
<div class="f_d">60</div>
 
<script>
var classs = document.getElementsByClassName('f_d');
var x = 0;
for(;x<classs.length;x++){
     classs[x].addEventListener('mouseover', function(){
          classs[x].className += "nnClass";
     });
}
</script>

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0
var x;
for (x = 0; x < classs.length; x++) {
  classs[x].addEventListener('mouseover', function() {
    // Prever que o seletor fique "f_d nnClass nnClass nnClass....." a cada evento over
    if (classs[x].className != 'f_d nnClass') {
        classs[x].classList.add('nnClass');
    }
  }, false);
}

 

Só que tem um porém, essa nova class ao seletor deve somente existir quando o mouse estiver em cima?

Se sim não seria melhor só usar o CSS?

Citar

.f_d:hover {

     background-color: black;

     color: white

}

Se for a questão, pode ser feito com javascript também, mas se usar somente css você ganha muito mais em performance.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By lezão
      Boa noite!
      Td bem com vcs?
       
      Meus amigos, estou precisando de um css que eu não faço ideia por onde começar ja pesquisei e nada.
      só encontrei como imagem, vejam.

       
      será que tem como fazer em css desse modelo, o texto tem q ficar sobreposto a cor do fundo.
       
    • By FabianoSouza
      Pessoal, é possível abrir uma nova aba/janela do navegador dentro de uma DIV?
      Como faço?
       
      Pergunto isso porque o IFRAME não vai funcionar para o meu objetivo (já testei).
       
      Estou tentando adaptar esse código JQUERY para o Javascript puro, pra saber se a ideia funciona (não manjo de JQUERY).
      https://stackoverflow.com/questions/33296867/how-to-open-the-content-inside-a-div-tag-in-new-tab
       
      Grato.
    • By Diego-SLP
      Boa tarde,
       
      Preciso atualizar um registro o qual já possui um valor na coluna QUANTIDADE, agora atualizarei a coluna VALOR UNITARIO e gostaria que fosse feita a multiplicação QUANTIDADE * VALOR UNITARIO.
       
      Como consigo fazer essa consulta do ID, pegar a QUANTIDADE e multiplicar pelo VALOR UNITARIO de cada linha ? vou atualizar lotes, e nao só um registro.
       
      Imagino que com o FOR, mas não consigo montar sua estrutura de repetição.
    • By kaioneresm
      Olá boa tarde, alguem sabe um codigo javascript facil que sirva para abrir uma div como se fosse um pou-up no centro da tela e dentro dela conter um X para fechá-la? 
       
      obrigado!!
    • By luiz monteiro
      E aí pessoal!
      Minha questão de hoje é a seguinte, ao usar o display inline-block ou inline-flex ocorre um desalinhamento dos blocos. Tentei usar outro inline, porem sem sucesso.
      Para melhor visualizar o que quero dizer, anexo esta uma print do resultado indesejável.
      Preciso que os blocos fiquem alinhados, porem ao inserir duas divs  (2 e 3) no terceiro bloco ocorre o desalinhamento.
      Vou deixar o código para melhor entender.
       
      //==================HTML
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <title></title>
          <link rel="stylesheet" type="text/css" href="./css/style.css">
      </head>
      <body>

          <div class="container">
              
              <div class="blocos">0</div>
              
              <div class="blocos">1</div>
              
              <div class="blocos">
                  <div class="linhas">2</div>
                  <div class="linhas">3</div>
              </div>
              
              <div class="blocos">4</div>
          </div>
       
      </body>
      </html>
       
       
      //================== CSS
      @charset "utf-8";
      *
      {
          margin: 0px;
          padding: 0px;
          list-style: none;
          resize: none;
          outline: none;
          text-decoration: none;
      }
      html, body
      {
          width: 100%;
          overflow-x: hidden;
          font-family: verdana;
          letter-spacing: 1.5555px;
          font-weight: normal;
      }
      .container
      {
          width: 100%;
          padding-left: 13px;
          background: #000;
      }
      .blocos
      {
          display: inline-block;
          width: 300px;
          height: 250px;
          background: #888;
      }
      .linhas
      {
          background: #f60;
          width: 100%;
          height: 122px;
          margin-bottom: 2px;
      }
       
      Agradeço desde já.
       
       
       

×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.