0

jquery の mouseenter / mouseout エフェクトを使用したメニューの作成に問題があります。小さなアイコンを表示したいのですが、ユーザーが項目にカーソルを合わせると、左に展開してメニュー リンクが表示されます。

ただし、下からマウスオーバーした場合にのみ機能し、横からは機能しません。その本当に奇妙な動作。

これが私のcssです：

.userBlock {
       display: inline;
       float: right;
    }

    .userBlock a {
       padding-left: 15px;
       line-height: 35px;
       text-decoration: none;
       cursor: pointer;
       color: rgba(0, 0, 0, 0.75);
       border-left: 1px solid rgba(0, 0, 0, 0.15);
       display: inline-block;
       font: bold 13px/36px "Helvetica Neue",Helvetica,Arial,sans-serif;
       width: 25px;
       overflow: hidden;
    }

    .userBlock a:last-child  {
       border-right: 1px solid rgba(0, 0, 0, 0.15);
    }

    .userBlock a span{
       margin-left: 15px;
    }

そして私のhtml：

 <div class="userBlock">
       <a>
           <img src="../images/config.ico" />
           <span>Test</span>
       </a>
       <!-- .... -->   
 </div>

最後に私のjquery：

// mouse over links
$('.userBlock a').mouseenter(
   function() {
      $(this).stop().delay(1).animate({'width':'100px'}, 500);
   }
);

// mouse leaves link
$('.userBlock a').mouseout(
   function() {
      $(this).stop().delay(1).animate({'width':'25px'}, 500);
   }
);

すべての助けに感謝します!

4

1 に答える 1

1

使用する

// mouse over links
$(document).on('mouseenter', ".userBlock a", function() {
      $(this).stop().delay(1).animate({'width':'100px'}, 500);
   }
);

// mouse leaves link
$(document).on('mouseleave', ".userBlock a", function() {
      $(this).stop().delay(1).animate({'width':'25px'}, 500);
   }
);

アップデート

更新された JSFiddel デモ

CSSheight:25px;に追加.userBlock a

これはあなたの質問ではないため、テキストと画像の位置合わせは行われません。

于 2013-08-27T12:43:07.217 に答える