Mouse hover jquery

by Jader Wagner

HTML

<div class="bloco">
    <img class="imgBloco" src="" />
    <p class="fraseBloco">AQUI É TIPO UM TITULO</p>
    <span class="conteudoBloco" style="display: none;">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>

<div class="bloco">
    <img class="imgBloco" src="" />
    <p class="fraseBloco">AQUI É TIPO UM TITULO</p>
    <span class="conteudoBloco" style="display: none;">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>

<div class="bloco">
    <img class="imgBloco" src="" />
    <p class="fraseBloco">AQUI É TIPO UM TITULO</p>
    <span class="conteudoBloco" style="display: none;">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>

<div class="bloco">
    <img class="imgBloco" src="" />
    <p class="fraseBloco">AQUI É TIPO UM TITULO</p>
    <span class="conteudoBloco" style="display: none;">DESCRICAO QUE APARECE QUANDO MOUSE ENTRA</span>
</div>

CSS

div {
    height: 160px;
}
img {
    width: 100px;
    height:100px;
}
div:nth-child(1) img {
    background-color:red;
}
div:nth-child(2) img {
    background-color:green;
}
div:nth-child(3) img {
    background-color:blue;
}
div:nth-child(4) img {
    background-color:yellow;
}

JavaScript

$('.bloco').hover(function () {
    $(this).children('.imgBloco, .fraseBloco').stop().hide();
    $(this).children('.conteudoBloco').stop().fadeIn(1000);
}, function () {
    $(this).children('.imgBloco, .fraseBloco').stop().fadeIn(1000);
    $(this).children('.conteudoBloco').stop().hide();
});