Question

我正在开发一个“最新项目”页面..这些项目在li标签内显示为链接照片..我想添加jquery，当有人将照片悬停在照片上时，它会更改背景颜色并查看中间的小图片......李码是..

<li><a class="workslinks" href="#"><img src="img/home/l_work/1.png" alt="1" /><div style="z-index:1;" class="workhover"><div class="hoversymbol"></div></div></a></li>

CSS：

li{
    float:right;
    list-style:none;
}
li a{
    display: block;
    width: 215px;
    height: 115px;
    margin: 0 15px 15px 0;
    padding: 4px;
    background: #fff;
    border: 1px #eee solid;
    box-shadow:0px 0px 8px #f1f1f1;
    -moz-box-shadow:0px 0px 8px #f1f1f1;
    -webkit-box-shadow:0px 0px 8px #f1f1f1;
}
li a img{
    display:block;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition:all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -transition: all 0.2s ease-in-out;
}
li a img:hover{
    background: #000;
    opacity:1.0;
}
li a .workhover {
    background:rgba(0,0,0,0.4) !important;
    width: 215px;
    height: 115px;
    position: absolute;
    top: 5px;
    display: none;
}

li a .workhover .hoversymbol {
    background:url(../img/home/l_work/links.png) center center no-repeat;
    width:100%;
    height:100%;
}

对于jquery代码，我尝试使用代码删除一个具有hidden属性的类，当hovering时与workhover div相关但是它只为所有列表元素而不是仅选择的列表元素:(

=================

我只想要一个代码，当它悬停.workslinks时，它会将.workhover的不透明度值从0更改为1缓慢..所以它看起来像淡入淡出，mmm可能吗？没有CSS过渡

Answer 1

您可以使用fadeIn()和fadeOut() methods in jQuery because the。workhover object is initially display：none`：

$(".workslinks").hover(function() {
    $(this).find(".workhover").stop(true).fadeIn(1000, 1);
}, function() {
    $(this).find(".workhover").stop(true).fadeOut(1000, 0);
});

jQuery悬停fadein并更改类

1 个答案: