Question

我无法让switchClass为我的图像工作。我有2个switchClass调用。文本的一个很好，但img的一个什么都没有，只能切换类（没有视觉上的变化）。

我有一个演示here（jsFiddle不适用于此示例...）

// Item Hover effects
$("div.cage > div.item").on("mouseenter", function (e) {
    // img
    $(this)
        .children('a')
        .children('img').stop(true, true)
        .addClass("network-img-state-default").switchClass("network-img-state-default", "network-img-state-hover", 200, 'easeInOutQuad');

    /* works but not ideal as I have media tags for dimensions        $(this).children('a').children('img').stop().animate({ "height": '299', "left": '0', "top": '0', "width": '450'}, 200, 'easeInOutQuad');
     */

    // h2
    $(this)
        .children('a')
        .children('h2').stop(true, true)
        .switchClass("network-state-default", "network-state-hover", 200, 'easeInOutQuad'); // End h2
}).on("mouseleave", function (e) {
    // img 
    $(this)
        .children('a')
        .children('img').stop(true, true)
        .switchClass("network-img-state-hover", "network-img-state-default", 200, 'easeInOutQuad');

    /* works        $(this).children('a').children('img').stop().animate({ "height": '332', "left": '-20', "top": '-20', "width": '500'}, 200, 'easeInOutQuad');
     */

    // h2
    $(this)
        .children('a')
        .children('h2').stop(true, true)
        .switchClass("network-state-hover", "network-state-default", 200, 'easeInOutQuad'); // End h2
});

img应该缩小悬停。我有动画代码注释掉了（所以你可以看到我想要的效果），但我想使用类进行媒体查询。

希望这是我错过的小事。任何见解都表示赞赏。

由于

Answer 1

简答

你的课程覆盖了你的风格：

.item a img {
    width: 500px;
    height: 332px;
    max-width: none;
}

此样式的特异性高于.network-img-state-hover，因此可以应用它。将悬停选择器从.network-img-state-hover更改为：

.item a img.network-img-state-hover {
    ...
}

http://jsbin.com/nejowaqe/1/edit

奖金提示

您可以更进一步消除默认状态类，并使用.addClass()和.removeClass()代替.switchClass()。使用.hover()和.toggleClass()进一步使用，然后您可以对mouseenter和mouseleave使用一个函数：

http://jsbin.com/nejowaqe/3/edit

把我的答案推得太远了; - ）

您也可以使用CSS Transitions使用完全没有JavaScript 来执行此操作。删除JavaScript后，将悬停类替换为使用:hover伪类的选择器，并将transition属性添加到现有样式中：

.item a img {
    /* ... existing styles ... */
    transition: 0.2s ease-in-out 0s;
    transition-property: width, height, left, top;
}
.item a h2 {
    /* ... existing styles ... */
    transition: 0.2s ease-in-out 0s;
    transition-property: padding-top, background-color, opacity;
}
.item:hover a img {
    /* ... existing styles ... */
}
.item:hover a h2 {
    /* ... existing styles ... */
}

http://jsbin.com/nejowaqe/4/edit

当然，这在IE9或更早版本中不起作用，因此如果您需要支持这些浏览器，请坚持使用jQuery方法。

Answer 2

课程切换很好。有一个CSS问题。你有：

.item a img {
    width: 500px;
    height: 332px;
    max-width: none;
}

然后：

.network-img-state-default {
    width: 500px;
    height: 332px;
    left: -20px;
    top: -20px;
}

最后：

.network-img-state-hover {
    width: 450px;
    height: 299px;
    left: 0;
    top: 0;
}

.item a img的优先级高于其他2个类，因此浏览器在任何情况下都使用width: 500px;和height: 332px;。类切换工作正常。将.item a img.your_class_name用于默认和悬停类。

如何将switchClass与img标签一起使用？

2 个答案:

简答

奖金提示

把我的答案推得太远了; - ）