在我的网站上，我有多个图片，在图片上悬停时jquery应该通过toggleClass + CSS让图片标题可见，但没有这样的运气。我很确定问题在于jquery，但经过无数尝试修改$this，切换.parents到.closest到.parentsUntil等，我已决定寻求帮助，请帮助我一定会感激它。。悬停功能不起作用

这里有一个jsfiddle说明我的问题

2014-10-18 Bakajuice

我只是固定的Fiddle

有一些问题 - jQuery的没有被列入，类imghover失踪闭幕}，我已经调整jQuery的选择

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

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

来源

2014-10-18 02:14:40

你的解释很棒，谢谢:) – Bakajuice 2014-10-18 19:24:17

我遇到了一个问题，你的答案肯定有帮助，但我试图将它合并到多个图像中，一次只显示一个标题，但相反它一次显示所有标题。这是网站http://www.hitechwolf.com/wolfden/#，请帮忙。 – Bakajuice 2014-10-18 21:27:36

@Bakajuice没问题，我正在查看网站。问题就在于这个例子中的小提琴往往只能演示一个功能，必须对实际设置进行一些调整。刚刚找到image_title.js和导致问题的imageHover（）函数。 – 2014-10-18 21:44:05

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上时，熊猫会显示。但是当你徘徊在熊猫，文字会动摇。所以，我添加了一个属性pointer-events:none。震动的原因是.imgtitle节点不是img的孩子。

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

来源

2014-10-18 02:46:05

谢谢你使用指针事件消除了毛刺的效果，漂亮的额外奖励我欣赏它：D – Bakajuice 2014-10-18 19:26:37

。悬停功能不起作用

回答

JSFiddle

相关问题