Question

有谁知道如何制作这样的动画 http://www.hariripontarini.com/projects/corporate

谢谢！火星

Answer 1

.theClassThatTargetsYourImageContainer:hover {
    opacity: 0.3;
}

但是，为了在列表中选择正确的项目，您无法真正使用CSS，但是您可以使用jQuery监听mouseenter / mouseleave事件并使魔法发生。< / p>

Answer 2

$('.imageClass').hover(function() {
     $(this).fadeOut();
}, function() {
     $(this).fadeIn();
});

或

$('.imageClass').hover(function() {
     $(this).css("opacity", .5);
}, function() {
     $(this).css("opacity", 1);
});

Answer 3

这就是你想要的。

<强> HTML

<div class="test">
   <img class="thumbnail thumb-200 " alt="02. McKinsey &amp; Co. Jakarta" src="http://www.hariripontarini.com/hpa/wp-content/uploads/mcj_01-200x200.jpg">
</div>

<强> CSS：

.test :hover{
    opacity: 0.3;
}

<强> Working Demo

Answer 4

使用选择器，ID /类，然后在链接上使用mouseenter()和mouseleave()，更改特定图片元素的css属性opacity：

$("#first").on({
    mouseenter: function () {
        $("#1").css('opacity', '0.3');
    },
    mouseleave: function () {
        $("#1").css('opacity', '');
    }
});

反之亦然（在鼠标悬停在图像上时改变链接的不透明度）..

$("#1").on({
    mouseenter: function () {
        $("#first").css('opacity', '0.3');
    },
    mouseleave: function () {
        $("#first").css('opacity', '');
    }
});

<强> JsFiddle demo

鼠标悬停在链接上时（悬停）更改图像，反之亦然

4 个答案: