0

私は「最新のプロジェクト」ページに取り組んでいます..プロジェクトは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コードの場合、ホバリング時にdivに関連付けられたhiddenプロパティを持つクラスを削除するコードを試しましたが、選択した要素だけでなくすべてのリスト要素に対して削除しました:(workhover

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

ホバリング.workslinksすると、不透明度の値が.workhover0から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 に答える