Eu tenho várias div .box, incluindo texto breve (<p>
) e uma miniatura. Estou tentando alterar a opacidade do texto dentro de uma div .box quando qualquer parte da .box é suspensa, mas não quero que a imagem seja afetada. Até agora eu tenho isso:
jQuery(document).ready(function(){
$(".box").fadeTo("fast", 0.6);
$(".box").hover(function(){
$(this).fadeTo("fast", 1.0);
},function(){
$(this).fadeTo("fast", 0.6);
});
});
Eu sei que deve ser bem simples, mas estou preso. Obrigado pela ajuda.
Respostas:
0 para resposta № 1Usar .find()
para obter apenas o <p>
dentro para aplicar o desbotamento, assim:
jQuery(function(){
$(".box p").fadeTo("fast", 0.6);
$(".box").hover(function(){
$(this).find("p").fadeTo("fast", 1.0);
},function(){
$(this).find("p").fadeTo("fast", 0.6);
});
});
Isso usa $(".box p")
apenas desbotar o <p>
elementos inicialmente e, em seguida, no cursor do mouse (para a caixa inteira), estamos encontrando o mesmo <p>
elementos dentro. Se você fez $(".box p").hover(...)
apenas pairando no <p>
em si funcionaria.
1 para resposta № 2
Do utilizador $(".box p")
seletor
0 para resposta № 3
Você provavelmente poderia colocar a imagem em miniaturafora da caixa, você está tentando esmaecer ou usar um seletor mais preciso como $ (". box p"). Depende se você deseja que a decoração da caixa desapareça ou apenas o texto.
isso também pode funcionar:
<div class="container">
<img id="thumbnail" src="/images/" style="float: left; /* or position abosolute"/>
<div id="box">
<p>text</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// $(".box p").fadeIn("fast");
// or:
$(".box").fadeIn("fast");
});
</script>