2

画像をクリックすると小さなキャプション バーにアイコンが表示されるように、css で JavaScript を設定するのに問題があります。現在、画像にカーソルを合わせるとキャプション バーが表示されますが、これを変更して、タッチする必要があり、ホバー機能を持たないタブレットのユーザーが使用できるようにしたいと考えています。

ページを見る

<figure>
    <img width="158" height="158" alt="Gravatar" 
             data-bind="attr:{src: GravatarUrl}" />
    <figcaption> 
        <a title="Email" id="emailIcon" class="icon-envelope icon-white" 
                   data-bind="attr:{'href':'mailto:' + Email()}"></a>
        <a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
    </figcaption>
</figure>

CSS

figure, figcaption {
    display: block;
}

 figure {
    position:relative;
    float:left;
    margin:20px;
    width:158px;
    height:158px;
    border:1px solid #333;
    overflow:hidden;
    background: #fff;
    padding: 1px;
}

 figure figcaption {
    position:absolute;
    bottom:0;
    left:0;
    opacity: .75;
    margin-bottom:-115px;       
    -webkit-transition: margin-bottom;
    -webkit-transition-duration: 400ms;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-property: margin-bottom;
    -moz-transition-duration: 400ms;
    -moz-transition-timing-function: ease-out;
    -o-transition-property: margin-bottom;
    -o-transition-duration: 400ms;
}

 figure.open figcaption {
    margin-bottom:0px;
}

 figcaption {
    width:160px;
    height:25px;
    background:#111;
    color:#fff;
    font-family: Arial, Helvetica, sans-serif;
}

Javascript cssだけでそれを行う方法があるかどうかはわかりません。

<script type="text/javascript">
    (function ($) {
        $.views.Roster.GetRoster('@url');
        $('figure').on('click', function (event) {
            $(event.currentTarget).toggleClass('open'); 
        });
    })(jQuery);
</script>
4

2 に答える 2

2

クラスを切り替えて、表示される要素を CSS に任せるというのは素晴らしいアイデアです。 

$('figure').on('click', function (e) {
    $(this).toggleClass('open'); 
});

その場合は、figcaption のスタイルを希望どおりに設定してから、以下を追加します。

figcaption { display: none; }
.open figcaption { display: block; }

このように、figcaption がデフォルトで非表示になっている場合でも、ターゲットをクリックして JavaScript が「open」クラスを追加すると、figcaption が表示されます。確かにブロックを表示する必要はありません。「なし」以外のほとんどの場合があります。

于 2013-04-05T14:46:05.173 に答える
1

このコードの場合

figure:hover figcaption {
    margin-bottom: 0px;
}

figcaptionを表示していて、それを表示したいときにopenクラスを に入れている場合は、次を使用できます。figure

figure:hover figcaption, figure.open figcaption {
    margin-bottom: 0px;
}
于 2013-04-05T13:50:51.657 に答える