1

Sou iniciante em materialize. tenho uma nav bar, em qual a cor do link é Cinza. Quero editar o hover para que ao passar o mouse em cima mude sómente a cor do link para azul, podem me ajudar pfv???

Esta é minha nav bar

 <nav class="white" style="padding:0px 10px;">
    <div class="nav-wrapper ">
      <a href="#" class="brand-logo indigo-text text-darken-4">MATTAR</a>

      <a href="#" class="sidenav-trigger" data-target ="mobile-nav">
        <i class="material-icons indigo-text text-darken-4">menu</i>
      </a>

      <ul class="right hide-on-med-and-down">
        <li><a href="#" class=" grey-text text-darken-1">HOME</a></li>
        <li><a href="#" class=" grey-text text-darken-1">SERVICES</a></li>
        <li><a href="#" class=" grey-text text-darken-1">ABOUT</a></li>
        <li><a href="#" class=" grey-text text-darken-1">CONTACT</a></li>
      </ul>
    </div>
  </nav>

1
  • criei um codiggo pra customizar o hover, mas esta vazio. tentei: um a a:hover{ color:red;} mas não funcionou Commented 9/01/2019 às 23:49

1 Resposta 1

0

Mateus o que acontece é que vc está usando duas classes de cor do Materialize na sua tag <a> e essas classes de cor grey-text e text-darken-1 do Materialize têm por padrão !important na propriedade color, com isso mesmo colocando a:hover{ color:red;} a cor não vai ser aplicada. Sugiro que vc leia aqui: Qual seletor css tem prioridade?

Veja essa imagem para entender melhor.

inserir a descrição da imagem aqui


Sugestão para aplicar a cor

Uma das opções é colocar !important também no estilo que vc vai fazer para aplicar a cor nova. Por exemplo como eu fiz no código abaixo.

.texto-red:hover{ color:red !important }

Execute em "Página toda" para ver o menu completo e os links

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  
  .texto-red:hover{ color:red !important }
  
</style>
</head>
<body>
  
  <nav class="white" style="padding:0px 10px;">
    <div class="nav-wrapper ">
      <a href="#" class="brand-logo indigo-text text-darken-4">MATTAR</a>

      <a href="#" class="sidenav-trigger" data-target ="mobile-nav">
        <i class="material-icons indigo-text text-darken-4">menu</i>
      </a>

      <ul class="right hide-on-med-and-down">
        <li><a href="#" class=" grey-text text-darken-1 texto-red">HOME</a></li>
        <li><a href="#" class=" grey-text text-darken-1 texto-red">SERVICES</a></li>
        <li><a href="#" class=" grey-text text-darken-1 texto-red">ABOUT</a></li>
        <li><a href="#" class=" grey-text text-darken-1 texto-red">CONTACT</a></li>
      </ul>
    </div>
  </nav>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</body>
</html>

2
  • Ajudou Muito!!!!!! muito obrigado Hugo, sou novo na area e no forum, como posso fz para agradecer? Commented 10/01/2019 às 0:20
  • @MateusAraújo tranquilo meu caro, fico feliz em ter ajudado. Na verdade não eh preciso "agradecer", o site aqui eh um site de perguntas e respostas, não eh bem um fórum Pq não eh para conversas e bate papo, eh mais pergunta e resposta mesmo. Vi que vc aceitou a resposta, isso eh o principal a fazer, já que sua duvida foi resolvida. Assim a pergunta não fica em aberto sem resposta aceita mesmo já tendo sido resolvida. No mais sucesso e bons estudos ;)
    – hugocsl
    Commented 10/01/2019 às 9:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .