0

我想通过 javascript 使用悬停来突出显示（边框小于图像选项卡的透明颜色）我的菜单项。但是，我似乎无法正确处理。作为一个 dded 效果，当单击菜单选项卡时，我希望我的图像选项卡有一个弹跳动画。这可以做到吗？

这是我的 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 演示更多来自Brainjar

于 2013-08-07T04:43:29.723 回答