0

私はJavascriptとJQueryを初めて使用します。

私はこれについてグーグルで調べてみましたが、正しい現象を正確に説明できなかったため、Googleは私が探していなかった結果を私に与えました。

Pinterestのようなサイトでは、マウスオーバー画像効果をどのように作成しますか。つまり、画像内の[再ピン留め]/[いいね]/[コメント]メニューです。

これはかなり簡単です-画像内に1つのボックスが必要ですか？

私を正しい方向に向けることができますか、それとも本当に簡単な場合はこれを解決してください。

ありがとうございました。

4

4 に答える 4

2

私は、Pinterest がどのように正確にそれを行うかを確認するためにかなりの量の掘り下げを行いましたhover. これが私が見つけたものです：

これは、Pinterest の典型的なピンです (具体的にはリピン)。

<a class="Button Button11 WhiteButton ContrastButton repin_link" data-componenttype="MODAL_REPIN" data-id="176555247863760400" href="/pin/176555247863760400/repin/" wotsearchprocessed="true">
    <em></em><span>Repin</span>
</a>

リピン、いいね、コメント ボタンの CSS は次のとおりです。

.actions.likebutton,
.actions.comment,
.actions.repin_link,
.actions.editbutton,
.actions.unlikebutton {
   display: none
}.pin: hover.actions.likebutton,
 .pin: hover.actions.comment,
 .pin: hover.actions.repin_link,
 .pin: hover.actions.editbutton,
 .pin: hover.actions.unlikebutton {
   display: block
 }

基本的に、ピンがホバーされていないときは表示をなしに設定し、ユーザーがピンの上にホバーしているときは、css はそれをブロックとして表示します。実際に要素を調べると、すべてのボタンが表示されますが、ホバーするまで画面に表示されません。a hrefもちろん、他のサイトへのリンクは、ユーザーを別のリンクに誘導するを通じて簡単に行われます。お役に立てれば。

于 2012-12-29T10:30:02.047 に答える
0

画像の代わりにボタンを使用し、実際の img タグをボタン内に配置できます。次に、ボタン内に div などの他の要素を追加します。これで、javascript/jquery を使用して、マウスオーバーで div を選択的に非表示および表示できるようになりました。

于 2012-12-29T10:12:01.950 に答える
0

かなり簡単に実装できます:

HTML

<div class="gallery-item">

    <a href="#">
      <img alt="" src="image.jpg" />
    </a>

    <div class="gallery-item-like"> <!-- class `gallery-item-like` is `display:none;` by default -->
      <a href="#" class="button-like">
        <img src="icon.png" width="20" height="20" title="iLike" />
      </a>
    </div>

</div>

JS

$('.gallery-item').hover(
       function(){
           $(this).find(".gallery-item-like")
            .fadeIn("fast");
       },
       function(){
           $(this).find(".gallery-item-like")
            .fadeOut("fast");
     }
);

CSS

.gallery-item-like {
    display: none;
    font-size: 10pt;
    position: relative;

    top: 15px;
    left: 15px;
}
于 2012-12-29T10:10:43.067 に答える
0

フィドル

<div class="box"> <img src="myimage"> <div class="options"> <div class="button"> Like </div> <div class="button"> Repin </div> </div> </div>
于 2012-12-29T10:11:07.480 に答える