JSFiddle

Question

在我的网站上我有多张图片，在图片上悬停时，jquery应该通过toggleClass + css显示图片标题，但没有这样的运气。我很确定问题在于jquery，但经过多次尝试修补$this，将.parents切换为.closest到.parentsUntil等等，我决定寻求帮助，请帮助我一定会感激。

这是jsfiddle说明我的问题

Answer 1

我刚修好了Fiddle

存在一些问题 - 未包含jquery，类imghover缺少结束}，我已将jquery select调整为

$(this).parents('div').find("h2").toggleClass('imghover');

正如我注意到，在你的小提琴中，课程imghover以tr结尾，看起来并非完整的css被复制到原来的小提琴中。在上面的第一个小提琴中，我刚删除了这个tr，并添加了缺少的}以关闭该类，因此您的一些预期的CSS，例如transition，可能会丢失。只需添加一个转换 - 正如我猜想的那样是这样的 - 调整后的第二个Fiddle看起来更好。我也删除了var $this = $(this);，因为它不再需要了。

Answer 2

JSFiddle

更改了CSS

.imghover {
    opacity: 1;
    transform: translateY(50px);
    text-transform: uppercase;
    font-style: italic;
    transition: all 0.5s;
}

.imgtitle {
    opacity: 0;
    position: absolute;
    color: rgba(255, 255, 255, .8);
    width: 296px;
    background-color: rgba(75, 85, 90, .95);
    border: black solid 2px;
    padding: 1.5%% 0 1.5% 0;
    border-radius: 7.5px;
    text-shadow: 2px 2px 1px #000;
    pointer-events: none;
}

您需要注意两点：

如果您使用转换，使用转换可以使转换更流畅。在这种情况下，我更改了课程 .imghover 。
当光标悬停在img上时，会显示 panda 。但当你徘徊熊猫时，文字会动摇。所以，我添加了一个属性pointer-events:none。摇动的原因是.imgtitle节点不是img的孩子。

最后，当你悬停img时，过渡很舒服。

.Hover功能不起作用

2 个答案:

JSFiddle