0

マウスオーバー時にリンクの周りにいくつかの記号を表示するにはどうすればよいですか? たとえば、私はいくつかのリンクを持っています:

<ul>
    <li><a href="#"><span>&LT;</span>Home<span>&GT;</span></a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>

つまり、これらの「< >」がリンクの後ろからゆっくりと拡大してから、フーバーします。そして、マウスを離した後、戻って非表示にします。CSS トランジションとアニメーションについて知っています。私は多くの方法を試しましたが、うまくいきません。最良の結果は、小さな画像と不透明度を使用したときでした。しかし、それは私が望むものではありません。ビハインドリンクからのスムーズな動きが欲しい。

編集:まあ、グーグルでしばらくすると、このウェブサイトhere に出くわしました。彼のメニューリンクに似たものを作ろうとしています。私は完全なコードを求めているのではなく、正しい方向に向けてください:) JavaScriptでのみ行われるのでしょうか?

4

4 に答える 4

0

今のところFirefoxでの移行に問題がなく、Webkitチームが生成されたコンテンツの移行を有効にするのを待つことができる限り、これは私の提案です。

body { background: #000; } 
ul li a { text-decoration: none; color: #fff; font-size: 2rem;
font-family: Avenir, sans-serif; text-transform: uppercase; }

ul li a:after, ul li a:before { opacity: 0; font-size: 1.5rem; position: relative; 
top: -.25rem; color: #f00; z-index: -2; } 

ul li a:before { content: "<"; right: -2rem; } 
ul li a:after { content: ">"; left: -2rem; }
ul li a:hover:before, ul li a:hover:after { opacity: 1; transition: .7s all linear; } 
ul li a:hover:before { right: 0; } 
ul li a:hover:after { left: 0; } 

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Paintings</a></li>
</ul>

Dabbletのコード。これがお役に立てば幸いです。

于 2012-10-21T23:47:58.063 に答える
0

css で :after と :before を使用する

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>​

CSS

body{background:black}
li a{
    white-space: nowrap;
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0px 0px 0px #fff;
    letter-spacing: 1px;
    -moz-transform: scale(0.5); 
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5); 
    -webkit-transform: scale(0.5); 
    transform: scale(0.5); 
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    transition: all 0.6s linear;  text-decoration:none
}
li a:hover{
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    text-decoration:none
}
li a:hover:before{content:"<"}
li a:hover:after{content:">"}​

デモ

ただし、これは IE をサポートしていませんが、最新のブラウザーで動作します。

答え 2

あなたが参照しているサイトを調べたところ、純粋なcssでできていることがわかりました（cssで使用されている2つの画像があります）。以下のデモを見つけてください (CSS はかなり長いので、ここには貼り付けません)。

ライブデモ 2

于 2012-10-22T06:13:49.410 に答える
0

これのバリエーションは、「表示」の代わりに「可視性」を使用することです

.slide { 
      visibility: none;
 }

 li:hover .slide { 
      visibility: inline;
 }

この方法では、記号が追加されたときにテキストが移動しません。状況によっては正しく表示されない場合があります。

于 2012-10-21T22:36:37.603 に答える
0

1）最初に、リンクを生成するテンプレート内のすべてのリンクの周りに記号を追加します

 <li>
     <span class="slide">&lt;</span>
     <a href ....>
     <span class="sldie">&gt;</span>
 </li>

2）デフォルトで非表示に設定し、ホバー時に表示

 .slide { 
      display: none;
 }

 li:hover .slide { 
      display: inline;
 }

3) CSS3 遷移コードを追加して、非表示の div をスライドさせて表示しますhttp://atomicrobotdesign.com/blog/htmlcss/slide-up-captions-using-css3-transitions/

コードは例示のみを目的としており、実際に動作する製品のものではありません。しかし、これらのポインターを使用すると、効果を一緒に解析できるはずです。

于 2012-10-21T22:02:59.993 に答える