Javascript Jquery悬停显示和隐藏可见性问题

我实现的hover jquery show和hide函数有点问题。[单击此处查看站点][1]当我应用

可见性时：隐藏

对于我的CSS，此div

。悬停隐藏

不显示。但是，当我删除css属性

可见性：hidden

将鼠标悬停在div

上后，hover show and hide函数就会工作。hover hide

。有人知道我做错了什么吗。下面是我的代码片段：

html

李葡萄酒
lee vintage以抽象艺术家布林基·巴勒莫（Blinky Palermo）和罗伯特·芒戈尔德（Robert Mangold）的作品为灵感，展示了他们SS13系列的大胆作品

$（“.tint”）.hover（函数（）{
$（'.hover hide'）.removeClass（'hidden'）；
}，函数（）{
$（'.hover hide'）.addClass（'hidden'）；
});

使用

display:none

和jQuery的内置函数

.show（）

和

.hide（）

CSS

jQUery

$(".tint").hover(function(){
    $('.hover-hide').show();
},function(){
    $('.hover-hide').hide();
});

---

只需使用css就可以做到这一点

.hover-hide {
    display: none;
}
.tint:hover .hover-hide {
    display: block;
}

---

我只是不明白为什么每个人都想使用jquery来实现这一点。 更好的解决方案是使用如下CSS：

.tint .hover-hide {
  display:none;
}
.tint:hover .hover-hide {
  display:block;
}

就这些。无需进行任何编码。

尝试以下操作：-

css Html 最初将

hidden

类添加到动态内容中

 <div class="carousel-col-copy hover-hide hidden">

---

在此处工作正常-@Zenith除非将鼠标悬停在image@NewBoy看看这个。或者@NewBoy-将隐藏类添加到图下方的div中不会达到您的目的吗？@PSCoder谢谢，输入您的答案，我会接受。我使用了你的方法作为淡入淡出，你可以使用过渡效果。我的第一次尝试是css方法，但它不起作用。这样我就尝试了JS

.tint .hover-hide {
  display:none;
}
.tint:hover .hover-hide {
  display:block;
}

.hidden { visibility:hidden; }

 <div class="carousel-col-copy hover-hide hidden">

$(".tint").hover(function(){
        $('.hover-hide').toggleClass('hidden');
});