使用css/javascript懸停突出顯示菜單

Question

我想突出顯示（透明顏色的邊框小於圖像選項卡）我的菜單項使用通過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/

Answer 1

這裏有一些更多示例brainjar演示版更多來自Brainjar