1

我实现的悬停 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');
        });
4

4 回答 4

2

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

CSS

.hover-hide{
   display:none;
}

查询

$(".tint").hover(function(){
    $('.hover-hide').show();
},function(){
    $('.hover-hide').hide();
});
于 2013-05-03T19:31:59.233 回答
1

尝试这个：-

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');
});

参考 .toggle()

于 2013-05-03T19:48:46.400 回答
0

你可以用css来做。

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

示例小提琴

于 2013-05-03T19:34:19.473 回答
0

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

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

就这样。无需再进行任何编码。

于 2013-05-03T19:34:21.637 回答