Como fazer essa técnica?
  • Pessoal, numa chamada de notícia, onde tenho uma imagem, um título e parágrafo descritivo, como faço para que ao passar o mouse sobre a imagem o título seja sublinhado ou ao passar o mouse sobre o título a imagem seja destacada, tipo a Globo.com?
  • Boa pergunta!
  • dvddvd
    maio 2012
    Cara no globo.com pelo menos na home pelo que vi independente do mouse na imagem ou no titulo, fica subilinhado o titulo e a imagem recebe uma borda.
    Nesse caso vc tem um link abraçando a img e o titulo e no hover desse link vc faria tipo
    a:hover img{border:1px solid cor}
    a:hover .titulo{text-decoration: undereline;}


    Agora se vc quer da um hover na imagem e deixar o texto diferente ou vice-versa, diria pra usar jQuery, ja que vc ta dando foco num objeto e quer manipular o irmão dele (se assim estiver o seu html) usando siblings();

    Não sei se foi essa a sua pergunta, qualquer coisa posta ai.
  • dusignerdusigner
    maio 2012
    Caro amigo!

    Em seu codigo HTML adicione assim:


    <a href="link-da-noticia.html" class="foto " title="titulo">
    <img src="suaIMG.jpg" alt="foto" title="foto">
    <h2>No ES, mulher é amarrada e tem casa assaltada</h2>
    texto descritivo no no no no no no no no no no no no no no no no no no no no no no no no no no no no
    </a>

    Estruturalmente não é a forma mais correta, porem irar funcionar!! Ai vai sa dua criatividade fazer funcionar perfeito!

    E no CSS vc define


    .foto:hover img { border:1px solid cor;}
    .foto:hover { text-decoration: undereline;}
  • Muito obrigado, @dusigner ;-)
  • LFehLFeh
    julho 2012
    Amg, um jeito de fazer isso sem ficar com a estrutura "errada" é fazer a mesma coisa que o dusigner disse, mas colocar o :hover no elemento pai.

    Você deve definir esse elemento pai com position absolute.

    Dentro dele coloque um link absolute com left e top 0, e width e height 100%, esse link deve abrir e fechar sem nada dentro.
  • EdnilsonEdnilson
    julho 2012
    Só a título de Web Standard: a descrição dada por "dusigner" não é semânticamente correta.

    Um elemento de bloco "h2" não pode estar contido dentro de um elemento inline "a".
    Substitua "h2" por "strong" ou "em" que você estará escrevendo a marcação adequada.

    Outra solução seria marcar de forma diferente.


    <div class="algumaClasse">
    <a href="..."><img src="..." alt=""></a>
    <h2><a href="...">Título</a></h2>
    <a class="desc" href="...">Descrição</a>
    </div>


    Lembre-se que se for uma "lista de notícias", a marcação correta dispensa o elemento "div" e passa a ser marcada dentro de um elemento "ul".

    Para o CSS vale a herança dos elementos.

    .algumaClasse a img {regras css} /* para colocar uma borda na imagem */
    .algumaClasse h2 a {regras css} /* para sublinhar ou trocar a cor do título */
    .algumaClasse .desc {regras css} /* para sublinhar o texto de descrição */
  • robsonrochacrobsonrochac
    agosto 2012
    Valeu mesmo @LFeh e @Ednilson!!