Ajuda CSS para link

[danicarla 3]

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?

[Omar~ 87]

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.

[danicarla 3]

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 ?

[Omar~ 87]

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>

 

[danicarla 3]

Vou continuar usando javascript mesmo.. obrigada pela ajuda