0

javascript を介してホバーを使用して、メニュー項目を強調表示します (画像タブよりも小さい境界線を持つ透明な色)。しかし、私はそれを正しく理解できないようです。追加効果として、メニュー タブがクリックされたときに、画像タブに跳ねるアニメーションが必要です。これはできますか？

これが私のJavaScriptコードです。

<script type="text/javascript">
$(function () {
    $("img").hover(
        function () {
            $(this).addClass('highlight');
        },
        function () {
            $(this).removeClass('highlight');
        });
});

HTML:

 <ul class="menu_tab">
 <li><a href="#"><img src="images/top_menu_tabs/kaiiki.jpg" alt="tab1" /></a>
 <div class="highlight"></div>
 </li>
 </ul>

CSS:

 ul.menu-tab
 {
     z-index:0;
     list-style:none;
     overflow:hidden;
     margin:0px;
     padding:0px 0px 0px 10px;
 }
 ul.menu-tab li
 {
     display:block;
     color:#ffffff;
     margin-right:0px;
     margin-bottom:0px;
     position:relative;
     overflow:hidden;
     cursor:pointer;
 }
 ul.menu-tab a
 {
     display:block;
     width:60px;
     height:50px;
     overflow:hidden;
     border:0;
 }
 ul.menu-tab a:hover 
 {

     color:green;
     background-color:#ccffcc;
     margin-left:-20px;
     padding-left:20px;
     padding-right:20px;
     width:50px;
     border:20px solid green; 
 }
 .highlight
    {
     color:Green;
     width:auto;
     width:auto;
     padding:0;
  }

私が実現したいイメージは次のようなものです: http://www4.kaiho.mlit.go.jp/CeisNetWebGIS/

4

1 に答える 1

0

Brainjar Demoの他の例を次に示します。

于 2013-08-07T04:43:29.723 に答える