1

まあ、私は完全に途方に暮れています。右上に 4 つのソーシャル アイコンがある Web サイトを設計しています。アイコンにカーソルを合わせると、不透明度が 0.7 から 1.0 に増加し、その下にテキスト行が表示されます。これは、例によって最もよく示されています (画像は壊れていますが、問題ではありません)。

http://jsfiddle.net/7hZYj/

これは、CSS3 とリストを使用して達成したかなり単純な効果です。

#pageHeader .social ul ul {
    position: absolute;
    top: 30px;
    right:0;
    width:160px;
    text-align: right;
    opacity: 0.0;
    -moz-transition:ease .6s; /* Firefox 4 */
    -webkit-transition:ease .6s; /* Safari and Chrome */
    -o-transition:ease .6s; /* Opera */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
}

#pageHeader .social ul li:hover ul {
        opacity: 1.0;
}

問題は、画像の真下にカーソルを合わせると、とにかくテキストが表示されることです。たとえば、一番右にある画像のすぐ下にカーソルを合わせると、「e-list に参加」という行が表示されます。画像がホバーされたときにのみ、不透明度が 1.0 になるようにします...これは、上記の CSS で指定したものだと思います。

私は何を間違っていますか？

4

1 に答える 1

1

opacity要素をそこに残し、それは の子であるためli、非表示の要素にカーソルを合わせると、li.

#pageHeader .social ul ul {
    position: absolute;
    top: 30px;
    right:0;
    width:160px;
    text-align: right;
    opacity: 0.0;
    -moz-transition:ease .6s; /* Firefox 4 */
    -webkit-transition:ease .6s; /* Safari and Chrome */
    -o-transition:ease .6s; /* Opera */
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility:    hidden;
    -ms-backface-visibility:     hidden;
    left: -9999px;
}

#pageHeader .social ul li:hover ul {
    opacity: 1.0;
    left: auto;
}

追加するleft:-9999px;と問題が解決するようです。このフィドルに見られるように、ホバリングしなくなったときに自動的に左に戻りたくない場合は、トランジションを調整できます

于 2013-07-12T03:55:43.220 に答える