Question

我正在尝试在我的照片滑块上应用过度效果。我有以下代码结构：

<div class="corpo_itens">
    <div class="foto-carousel">
        <div class="transparencia">
            <span>A Novilha Rebelde (The Sound of Mu)</span>
            <br /><br />
            Elisa Queiroz e Erly Vieira Jr., 18 min, Vitória (ES), 2005
        </div>
        <img src="img/foto_carousel1.jpg" alt="Nome da foto" />
        <div class="icon-foto"><img src="img/icon_video.png" alt="Vídeo" /></div>
    </div>
    <div class="clear"></div>
</div>

当鼠标翻转图像时，我正在尝试做的是淡化和淡化“transparencia”div。这个滑块有不同的图像和下面的代码它工作但它隐藏并同时显示所有div ...我不知道如何解决它...

$('.foto-carousel').hover(
 function () {$('.transparencia').css({"display":"block"});}, 
 function () {$('.transparencia').css({"display":"none"});}
);

Answer 1

如果您想隐藏/仅显示悬停.transparencia内的.foto-carousel，则必须指定上下文，例如

$('.foto-carousel').hover(
    function () {$('.transparencia', this).css({"display":"block"});}, 
    function () {$('.transparencia', this).css({"display":"none"});}
);

Answer 2

$(".corpo_itens img").onmouseover(function(){
  $(this).parent().children(".transparencia").fadeIn(100);
});
$(".corpo_itens img").onmouseout(function(){
  $(this).parent().children(".transparencia").fadeOut(100);
});

或类似的东西。

jquery图像不起作用

2 个答案: