如何將懸停效果添加到嵌套到具有懸停的元素的元素？

我有一個由7列和可變數量的行組成的表。當我將鼠標懸停在表格行上時，播放按鈕出現在＃2列中。這與以下幫助下實現的：如何將懸停效果添加到嵌套到具有懸停的元素的元素？

.table-hover > tbody > tr { 
    border-left:4px; 
    border-left-color:transparent; 
    border-left-style:solid; 
    &:hover {; 
    border-left-color:@active-element-color; 
    >thtdbackground-color:#f5f5f5 
} 

>td:nth-child(2) { 
    background-image:url(images/play_icon.png); 
    background-position:center; 
    background-repeat:no-repeat 
} 
}

，它看起來如下：

Howered row with the play button

你可以看到懸停行具有播放按鈕。我正在嘗試做的是爲按鈕實現額外的（額外）懸停。

如果它是一個鏈接元素，我可以只添加pseudo：hover類到鏈接並得到我想要的。但是，這不是鏈接，當我點擊播放按鈕 - 數據必須發送到服務器。

我在這裏找到了解決方案JSFIDDLE，但問題是，在我的情況下，所有圖像通過CSS添加並在jffiddle示例中，圖像通過HTML代碼中的輸入元素添加。另外的問題是，有2個圖像，我想用single image

所以問題是 - 什麼是正確的方式來實現額外的懸停？

來源

2014-07-25 plywoods

td：nth-child（2）：懸停不起作用？ – abimelex

對於父元素的懸停事件，可以使用preventDefault（）方法通過阻止父級懸停來爲子元素定義新的懸停。 –

那麼，我想用一個精靈來打擊效果器。據我所知，我不能爲背景圖像設置特定的位置。它僅適用於背景屬性。布林豪，請你提供一個簡單的演示？ – plywoods

它可以通過兩種方式完成，純粹只使用CSS或藉助javascript（jQuery）。

使用CSS3：第n個孩子（）選擇：

#yourTable td { background: #ccc; height: 2em; width: 8em; } 

#yourTable tr:hover td:nth-child(2) { background: red; }

小提琴演示在這裏：http://jsfiddle.net/7F3ge/

或

使用jQuery懸停類添加到特定的DOM元素：

$('document').ready(function(){ 

    $('#yourTable tr').hover(function() { 
     $(this).children('td:eq(1)').toggleClass('hover'); 
    }); 

});

這裏的小提琴演示：http://jsfiddle.net/u527u/3/

來源

2014-07-29 01:19:35 Pennf0lio

如何將懸停效果添加到嵌套到具有懸停的元素的元素？

回答

相關問題