Question

我的悬停jquery show和我已实现的隐藏功能有点问题。 [单击此处查看网站] [1]当我将visibility: hidden;应用于我的CSS时，此div .hover-hide不会显示。但是，当我移除css属性visibility: hidden;时，悬停显示和隐藏功能一旦悬停在div .hover-hide上就会起作用。有谁知道我做错了什么。以下是我的代码片段：

HTML

<figure class="tint">
        <div class="carousel-col-copy hover-hide">
        <h1>lee vintage</h1>
        <div class="col-copy-passage col-copy-boarder">
        <p>With prints inspired by the abstract artists Blinky Palermo and Robert Mangold, lee vintage presents bold pieces from their SS13 collection</p>
        </div>
        </div>
    <img src="timthumb/timthumb.php?src=img/20.jpg&w=450&h=530&zc=1&q=100&a=0" class="slider-img grid-img">
    </figure>


$(".tint").hover(function(){
        $('.hover-hide').removeClass('hidden');
        },function(){
            $('.hover-hide').addClass('hidden');
        });

Answer 1

使用display:none和jQuery的内置函数.show()和.hide()代替。

CSS

.hover-hide{
   display:none;
}

JQUERY

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

Answer 2

试试这个： -

http://jsfiddle.net/DhQjk/

CSS

.hidden { visibility:hidden; }

HTML

最初将hidden课程添加到您的动态内容中。

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

JS

在悬停时使用.toggle()。

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

Ref .toggle()

Answer 3

你可以用css做到这一点。

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

<强> Example fiddle

Answer 4

我只是不明白为什么每个人都想要使用jquery。更好的解决方案是使用像这样的CSS：

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

这就是全部。没有什么需要做任何编码。

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

4 个答案:

http://jsfiddle.net/DhQjk/

CSS

HTML

JS