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

Question

我实现的悬停 jquery 显示和隐藏功能有一个小问题。 [点击此处查看站点][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

试试这个:-

http://jsfiddle.net/DhQjk/

CSS

.hidden { visibility:hidden; }

HTML

最初将隐藏类添加到您的动态内容。

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

JS

悬停时使用 .toggle()。

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

Ref .toggle()