1

一連のアンカー要素を使用して Web サイトにメニュー バーを作成したいと考えています。これまでのところ、すべてが正確に計画どおりに機能しています。

今、私は画像がユーザーの選択に従うことを望んでいます。したがって、画像は現在アクティブなメニュー項目にありますが、ユーザーがマウスを別のメニュー項目に合わせると、画像はその特定の項目に追従します。

ウェブで検索してみましたが、欲しいものではなく、単純なホバー効果がたくさんあります。ですから、あなたの誰かが例を手伝ってくれるか、正しい方向に私を押してくれるかもしれません.

私のメニューはこのように作られています

<nav id="page-nav">
    <a href="#">item #1</a>
    <a href="#">item #2</a>
    <a href="#">item #3</a>
    <!-- etcetera -->
</nav>

現在、CSS を使用してメニュー バーを作成しています。

a {
        display: inline-block;
        position: relative;
        width: 156px;
        height: 37px;

        top: -1px;

        text-align: center;
        line-height: 41px !important;

        color: #c3c3c3;
        text-decoration: none;
        text-shadow: 1px 1px 0px black;
        text-transform: uppercase;

        font-family: "Myriad Pro", "Calibri", sans-serif;
        font-size: 16px;
        letter-spacing: 1px;

    }

ユーザーのアクションに合わせて画像を表示したい。ボタンの背景として画像を使用すると、ある項目から別の項目にスライドさせることはできません...

ありがとう！

4

1 に答える 1

3

デモ

少しこぶを作りましたが、背景画像を付けたり、画像に置き換えたりすることができます。CSS トランジションを使用しているため、古いブラウザーでもテレポートします。

.blip {
  position: absolute;
  border-radius: 50%;
  background: rgba(100, 100, 255, .4);
  width: 40px;
  height: 20px;
  top: -10px;;
  left: -100px;
  -webkit-transition: left .5s ease-in-out;
     -moz-transition: left .5s ease-in-out;
          transition: left .5s ease-in-out;
}

CSS トランジションを使用したくない場合は、.cssをに置き換え.animateます。

var $blip = $('.blip');

$('#page-nav>a').on('mouseover', function(){
  $blip.css({
    left: $(this).offset().left 
        - $(this).parent().offset().left 
        + $(this).width() / 2 
        - 20 // 20 is one half of .blip's width
  });
});

$('#page-nav').on('mouseout', function(){
  $('.blip').css({left: -100});
});
于 2013-08-15T14:11:04.343 に答える