0

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

<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与div相关的属性的类，workhover但它对所有列表元素都有效，而不仅仅是选定的元素:(

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

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

4

1 回答 1

0

您可以使用fadeIn()abnd fadeOut() methods in jQuery because the.workhover object is initiallydisplay: none`：

$(".workslinks").hover(function() {
    $(this).find(".workhover").stop(true).fadeIn(1000, 1);
}, function() {
    $(this).find(".workhover").stop(true).fadeOut(1000, 0);
});
于 2013-09-22T17:02:48.307 回答