Jump to content
danicarla

Ajuda CSS para link

Recommended Posts

Bom dia pessoal,

Quero fazer um link com o titulo de uma cor e o texto em outra, mas quando passar o mouse em cima queria que a cor dos dois ficasse igual
Meu codigo está assim:

<style type="text/css">
a.ChamadaNoticias:link{text-decoration:none;}
a.ChamadaNoticias:visited{text-decoration:none;}
a.ChamadaNoticias:hover{color: #00FF05;text-decoration:underline;}
.tituloA{font-family:'Open Sans', sans-serif;color:#00698C;font-size:16px;font-weight:bold;}
.textoB{font-family:'Open Sans', sans-serif;color:#333;font-size:16px;}
</style>
<a href="#" class="ChamadaNoticias">
<div class="tituloA">Titulo da noticia</div>
<div class="textoB">Aqui vai uma breve descrição da noticia</div>
</a>

Como preciso fazer com meu CSS para quando passar o mouse em cima mudar a cor do titulo e do texto para mesma cor?

Share this post


Link to post
Share on other sites

a.ChamadaNoticias:hover * {

    color: #00FF05

}

 

Nesse caso quando o elemento <a> cujo seu classificador seja ChamadaNoticias sofrer evento hover, referimos que qualquer (*) outro elemento interno tenha a cor de texto que desejamos.

Share this post


Link to post
Share on other sites

Poxa nao sabia que era tão simples assim... só mais uma pergunta se dentro dos elementos eu tiver uma imagem e quiser que ela mude de cor ou mude a imagem, dá pra fazer com CSS ?

Share this post


Link to post
Share on other sites
2 horas atrás, danicarla disse:

imagem e quiser que ela mude de cor

Mudar imagem de cor? Você diz plano de fundo "background"?

 

Em fim segue a mesma questão....

Só que uma imagem provém de elemento <img>  não dar.... E dar...

<style>
    .exemplo > .imagem-b {
        display: none
    }
    .exemplo:hover > .imagem-a {
        display: none
    }
    .exemplo:hover > .imagem-b {
        display: block
    }
</style>

<div class="exemplo">
    <img src="imagem-a.formato" alt="" class="imagem-a"/>
    <img src="imagem-b.formato" alt="" class="imagem-b"/>
</div>

Na verdade não estamos trocando a imagem apenas ocultando uma e exibindo outra... Para esse tipo de situação eu prefiro usar javascript e realmente trocar o valor do atributo SRC.

 

Porém podemos fazer de forma simples com o css.

<style>
    .exemplo > .imagem {
        background-image: url('imagem-a.formato');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        height: 100px
    }
    .exemplo:hover > .imagem {
        background-image: url('imagem-b.formato') !important
    }
</style>
<div class="exemplo">
    <div class="imagem"></div>
</div>

 

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 ernestovm
      Seguinte. Eu não, mas acho que TODOS os desenvolvedores estão no mato sem cachorro no que se refere a esse problemão, que é a atualização do site lá no browser do seu usuário/visitante. Seja no acesso pelo computador e, pior ainda, pelo celular.
      Quando altero o arquivo stylo.css ou alguma imagem o browser, principlmente o Google Chrome NÃO ATUALIZA. No computador, só atualiza se eu teclar CTRL+F5, mas se pensarmos no visitante não dá né? "Nivelando por baixo", imagine aquele visitante do seu site que não entende bulufas... Vou ter que colocar no site um aviso pra todo mundo apertar CTRL+F5 para atualizar a página? Quando? Sempre? Um INFERNO.
      E quanto ao acesso do visitante pelo celular? Pior ainda.
      Então estou à procura de uma solução transparente ao usuário. No que se refere às imagens, encontrei soluções razoáveis, mas quanto ao arquivo CSS, nada encontrei.
      Se alguém souber de alguma "mágica" que resolva esse problema, compartilhe. TODOS os demais desenvolvedores agradecem.
      Obrigado
       
    • By Sapinn
      Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
       
      Codigo js 
       
      window.onscroll = function(){
          var top = window.pageXOffset || document.documentElement.scrollTop
          var barra = document.querySelector(".barra");
          if(top > 900){
              barra.style.display = 'flex';
      //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
              barra.classList.add('transition');
          }else{
             barra.style.display = 'none';
          }
      }
       
       
      Codigo css
      .barra{
          width: 100%;
          height: 70px;
          background-color: #090b13;
          display: none;
          justify-content: space-between;
          position: fixed;
          opacity: 0;
      }
      .transition{
          transition: 1s;
          opacity: 0.7;
          
      }
       
      codigo HTML
       
      <div class="barra" >
              <img src="assets/images/logo-nopad.svg" alt="">
              <button class="botao-assinatura-header">Assine Agora</button>
        </div>
       
       
    • By Sapinn
      Tenho um código de um balão de borda feito com html e css mas gostaria de saber como fazer para colocar a seta que está virada para baixo em cima do balão
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              body {
          padding: 140px 10px;
          text-align: center;
      }
      /* Criando o balão */
      .bubble {
          background-color: #fff;
          border: 2px solid #333;
          border-radius: 5px;
          color: #333;
          display: inline-block;
          font: 16px/24px sans-serif;
          padding: 12px 24px;
          position: absolute;
      }
      /* Criando o triângulo */
      .bubble.active:after,
      .bubble.active:before {
          border-left: 15px solid transparent;
          border-right: 15px solid transparent;
          border-top: 15px solid #fff;
          bottom: -15px;
          content: '';
          left: 80%;
          margin-left: -15px;
          position: absolute;
      }
      /* Criando a borda do triângulo */
      .bubble.active:before {
          border-left: 18px solid transparent;
          border-right: 18px solid transparent;
          border-top: 18px solid;
          border-top-color: inherit;
          bottom: -18px;
          margin-left: -18px;
      }
          </style>
      </head>
      <body>
          <span class="bubble active">Balão com borda</span>
      </body>
      </html>
       
    • By @William
      Olá boa tarde Então o meu problema são o seguinte: 1° Alguns comandos no CSS não são executados. Como inserir o CSS no HTML pela forma externa, inserir imagens no HTML, o @font-face também não funciona, enfim. Não estou conseguindo inserir qualquer elemento de fora (como imagens por exemplo), mesmo eu colocando o caminho de forma exata. Espero que vocês me ajudem.
       
      PS: não tenho PC então programo pelo celular usando o aplicativo Acode. E também sou iniciante... Talvez seja esse o problema?
       
      * A primeira imagem é a do CSS, onde eu disse que estava tendo problema com o @Font-face.
       
      * A segunda é a imagem do HTML que eu não está sendo inserida.
       
      * As imagens são apenas exemplos.
       


    • By Sapinn
      Tenha um menu hamburguer que abre a esquerda mas eu gostaria que ele abrisse a direita(O menu ficaria retrátil a direita ) para meu site se adequar a responsividade 
       
      codigo do menu que fica a esquerda 
       
      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <title>Menu vertical reponsivo com html e css</title>
          <link rel="stylesheet" href="style.css">
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css">
          <style>
             *{
          margin:0;
          padding:0;
      }
      .menuMobileVertical a{
          text-decoration:none;
          color:white;
          display:block;
          padding:20px 5px;
      }
      .menuMobileVertical a:hover{
          background:rgba(176,224,230);
          color:black;
      }
      body{
          font-family:arial;
      }
      input[type="checkbox"]:checked ~ nav{
          transform: translateX(350px);
      }
      .menuMobileVertical ul{
          list-style:none;
          position:absolute;
          top:70px;
          width:100%;
          
      }
      .icone-menu{
          font-size:40px;
      }
      input[type="checkbox"]{
          display:none;
      }
      .menuMobileVertical{
          background:rgba(16,16,16,.5);
          width: 350px;
          height: 100vh;
          left:-350px;
          position: absolute;
          transition:all 0.5s;
          
      }
      label{
          padding:15px;
          position:absolute;
          z-index:1;
      }

          </style>
      </head>
      <body>
          <div class="menuMobile">
              <input type="checkbox" id="check">
              <label for="check"><i class="bi bi-list icone-menu"></i></label>
              <nav class="menuMobileVertical">
                  <ul>
                      <li><a href="">HOME</a></li>
                      <li><a href="">LOGIN</a></li>
                      <li><a href="">ALUNO</a></li>
                      <li><a href="">PROFESSOR</a></li>
                      <li><a href="">CONTATO</a></li>
          </ul>
          </nav>
      </div>
      </body>
      </html>
×

Important Information

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