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

Jquery hover show and hide visibility issue

本文关键字：隐藏 可见性问题 显示 悬停 Jquery      更新时间：2023-09-26

我有一个小问题与我的hover 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');
        });

试试这个:-

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 ()

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

CSS 

.hover-hide{
   display:none;
}
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;
}

。不需要再做任何编码。

相关文章：