當我將鼠標懸停在父項上時，如何切換孩子？

下面是一些示例HTML當我將鼠標懸停在父項上時，如何切換孩子？

<style> .icon {display:none;} </style> 
<ul> 
    <li>ABC <i id="abc" class="icon">x</i></li> 
    <li>DEF <i id="def" class="icon">x</i></li> 
    <li>GHI <i id="ghi" class="icon">x</i></li> 
</ul>

我需要顯示.icon當我將鼠標懸停在其父li。

這裏就是我想：

$('.icon').each().parent().hover(function() { 
    $(this).children('.icon').toggle(); 
});

你能指出我朝着正確的方向嗎？

來源

2012-10-11 Ryan

可以在IE瀏覽器CSS這樣做太（雖然有問題的，因爲它有問題，有：懸停上標籤除A）：

<style> 
.icon {display:none;} 
li:hover .icon {display:inline;} 
</style>

來源

2012-10-11 21:42:55 joquarky

哇，這是一個很好的方式來做到這一點！我認爲你應該得到沒有劇本的功勞。 – Ryan

沒有必要使用each方法，你可以使用$(selector, context)，請嘗試以下操作：

$(document).ready(function() { 
    $('ul li').hover(function() { 
     $('.icon', this).toggle(); 
    }); 
})

來源

2012-10-11 21:38:58 undefined

Kabooom！ +1'：）' –

非常好。像魅力一樣工作。決定給joquarky答案，因爲完全用CSS解決它。但選擇者，背景對我來說是新的，所以我也很感謝你的回答。謝謝。 – Ryan

我假設你想，只要只能作爲鼠標懸停顯示的圖標：

$('li').hover(

    // called on mouseenter 
    function() { 
    $(this).find('.icon').show(); 
    }, 

    // called on mouseleave 
    function() { 
    $(this).find('.icon').hide(); 
    } 
);

這種方法比簡單的toggle更省錢，以防事件丟失。

來源

2012-10-11 21:50:17 lrsjng

哇，你是對的。切換會失去事件，特別是與remove（）組合時。這是一個很棒的發現。謝謝。 – Ryan

當我將鼠標懸停在父項上時，如何切換孩子？

回答

相關問題