無序列表中相應產品的懸停狀態

我在無序列表中單獨列出項目。該菜單由頂部列表項目中的產品圖像和下面列表項目中的相應產品名稱組成。我在底部列表項（產品名稱）上有一個懸停狀態。我將鼠標懸停在頂部列表項目（產品圖像）上時也會使相同的懸停狀態處於活動狀態。所以，當我將鼠標懸停在/images/foo.png上時，單獨列表項中的鏈接將變成#ffffff。以下是我正在使用的代碼。這是一個非常大的菜單的小樣本。無序列表中相應產品的懸停狀態

<ul> 
<li><a href="/products/">SPOUTS</a> 
    <ul> 
     <li class="menuheader"><a href="/products/spouts/index/">SPOUTS</a></li> 
      <li> 
       <a href="/products/spouts/foo/"><img src="/images/foo.png" style="margin:20px 0px 0px 20px;float:left;" /></a> 
       <a href="/products/spouts/bar/"><img src="/images/bar.png" style="margin:20px 20px 0px 5px;float:left;" /></a> 
       </li> 
      <li style="margin-top:10px;"> 
       <a href="/products/spouts/foo/" style="float:left;margin-left:50px;">FOO</a> 
       <a href="/products/spouts/bar/" style="float:left;margin-left:60px;">BAR</a> 
       </li> 
    </ul> 
</li>

來源

2012-11-19 ac12

問題是當我將鼠標懸停在圖像上時，如何獲取相應的產品名稱以採用其懸停狀態。 – ac12

這可能與jQuery來實現。類似這樣的：

<script type="text/javascript" charset="utf-8"> 
$(document).ready(function(){ 
    $(".YOUR_IMAGE").mouseenter(function (event) { 
      $(".YOUR_LINK").addClass('hoverState'); 
    }); 

    $(".YOUR_IMAGE").mouseleave(function (event) { 
      $(".YOUR_LINK").removeClass('hoverState'); 
    }); 
}); 
</script>

來源

2012-11-19 15:45:14

我會在每個單獨的圖像上放一個課嗎？我很抱歉，但你可以相應地調整http://jsfiddle.net/d4gey/。我有點失落。先謝謝你。 – ac12

是的，你會複製上面的代碼爲每個圖像/鏈接組合。你會想在每個電子郵件和鏈接上放一個獨特的類。 –

無序列表中相應產品的懸停狀態

回答

相關問題