html - ポストフッターはポストホバーでのみ表示されますか？

Question

.postdivにカーソルを合わせたときにのみpost-footerが表示されるようにする必要があります。どうやってやるの？post-footer divには、リンク（タグ）のみが含まれます。

<div class="post"> 
  <!-- other divs --> 
  <div class="post-footer"><!-- footer content here -->
  </div> 
</div>

Answer 1

次のような構造で：

<div class="post">
    <!-- other divs -->
    <div class="post-footer"><!-- footer content here --></div>
</div>

次のようなものを使用する必要があります。

.post-footer { display:none; }

.post:hover .post-footer { display: block; }

---

または、滑らかに見せたい場合は、次のトランジションを使用できますmax-height。

.post-footer { max-height: 0; transition: max-height 1s linear; }

.post:hover .post-footer { max-height: 300px; /* some value that will always be larger than the height of your footer */ }

注：トランジションのブラウザ互換性テーブル

両方の方法のデモ：http：//dabblet.com/gist/2819975

Answer 2

jqueryをダウンロードして、htmlに含めます。

$(document).ready(function(){
    $('.post').hover(function(){
        $(this).find('.post-footer').toggle(true);
    },function(){
        $(this).find('.post-footer').toggle(false);
    });
});

上記をjavascriptファイルで試してください