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 Theusy
      Boa tarde pessoal!
      Sou novo em html e css e me deparei com um problema enquanto estava "brincando" de programar.
      Provavelmente um erro bobo de programação, ou algo do tipo.
      Agradeço qualquer tipo de ajuda,
      Obrigado desde já!


    • By Sapinn
      Salve salve.
      Mas uma dúvida minha aqui É o seguinte tenho uma pagina que tem um texto de um usuario e eu gostaria de imprimir esta página usando javascript. Sei que usando o window.print() da pra imprimir o problema é que não fica organizado. Então eu gostaria de imprimir outra pagina na qual eu organizaria melhor o  texto e outra informações do usuario para impressão. Alguém tem algum codigo ae que faça isso?
       
      Desde já agradeço.
    • By Lucas Trindade
      Boa noite galera!
       
      Estou desenvolvendo um site em Bootstrap e surgiu uma dúvida afinal nunca desenvolvi um layout desta forma.
       
      Na foto anexada os 3 cards estão deslocados para baixo do container e isto faz com que a seção seguinte dos cards fique em cima deles por conta deste deslocamento.
       
      Não sei se fui bem claro mas, como eu arrumaria isso? 
       
      Preciso desenvolver este site para enviar para uma empresa. Alguém poderia me ajudar? Se for necessário envio o arquivo com o site inteiro.Obrigado
    • By joicitias
      Olá, 
      Estou aprendendo a programar ainda, e preciso fazer com que ao clicar em um botão o  conteúdo selecionado de um select seja copiado para uma textarea. 
       
       

    • By teusinhorossi
      Fala galera boa noite! Sou iniciante no HTML e CSS e tô aprendendo sozinho. Acontece que, to criando um site meu pra aprender e ver se consigo usar ele como um "curriculo".

      O problema é que agora que estou modelando ele para celular, a maldita barra do eixo y da tela não desaparece.
       
      Sei que talvez seja um erro bobo, mas estou há umas 3h e não consigo achar meu problema.
       
      Na primeira screenshot a tela, e na segunda o resto cinza que fica. O body do site está na cor cinza, mas quando começo a editar as coisas dentro do @media e tento mudar o tamanho dele por lá ou qualquer outra coisa não estou conseguindo... Desde já abraços e boa notie!
       


×

Important Information

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