將鼠標懸停在一個表格單元格上會突出顯示一行中的先前單元格

我有一個具有不同單元大小的表格。我試圖製作一些東西，如果我將鼠標懸停在某個單元格上，只有一行中的前一個單元格纔會突出顯示。將鼠標懸停在一個表格單元格上會突出顯示一行中的先前單元格

從你會看到項目+項目+一個項目j的例子有灰色背景也解釋說，我現在徘徊在小區「項目j」和以前的細胞也突出顯示。

像這樣，如果我將鼠標懸停在項目b上，它會突出顯示項目b，項目a和項目。如果我將鼠標懸停在第一個單元格項上，它將僅在項目上突出顯示，因爲沒有以前的單元格。

而且爲第1項，第2項和第3項

同我不是在jQuery的好，因爲我沒有構建任何邏輯來創建此。

如果有人幫助我，這對我很有幫助。

HTML

<table class="table-style" width="100%" border="0" cellspacing="0" cellpadding="0" > 
     <tr> 
     <td class="active" rowspan="4"><p><a href="#">Item</a></p></td> 
     <td ><p><a href="#">Item 1</a></p></td> 
     <td ><p><a href="#">Item 2</a></p></td> 
     <td ><p><a href="#">Item 3</a></p></td> 
     </tr> 
     <tr> 
     <td class="active" rowspan="3"><p><a href="#">Items a</a></p></td> 
     <td class="active" rowspan="3"><p><a href="#">Items b</a></p></td> 
     <td ><p><a href="#">Items i</a></p></td> 
     </tr> 
     <tr> 
     <td class="active"><p><a href="#">Items j</a></p></td> 
     </tr> 
     <tr> 
     <td><p><a href="#">Items k</a></p></td> 
     </tr> 
    </table>

CSS

.table-style{ 
    margin-bottom:15px; 
} 

.table-style td{ 
    border-collapse: collapse; 
    border: 1px solid #ddd; 
    text-align: center; 
    padding: 5px 0px; 
} 

.table-style td p { 
    font-size: 13px; 
    color: #454545; 
    font-weight: normal; 
} 

.table-style td p a { 
    color: #8d8d8d; 
    text-decoration:none; 
} 

.table-style td.active{ 
    background: #ddd; 
    border: solid 2px #C9C9C9; 
} 

.table-style td.active p a{ 
    color: #000; 
    font-weight:bold; 

}  

.table-style td p a:hover { 
    color: #000; 
    text-decoration:underline; 
}

[對不起，我英文不好]

來源

2014-04-18 Raihan

我已經修改了你的提琴，使現在的工作在這裏：http://jsfiddle.net/BHVv6/4/

你的表格單元格在一個奇怪的方式在那裏舉辦很難清楚父母是誰，所以我必須用這個手工繪製出父母結構：

parentMap = { 
    "itemOrig": false, 
    "item1": "itemOrig", 
    "item2": "item1", 
    "item3": "item2", 
    "itemI": "itemB", 
    "itemJ": "itemB", 
    "itemK": "itemB", 
    "itemB": "itemA", 
    "itemA": "itemOrig" 
};

來源

2014-04-18 19:07:58 Richard

這是我想要的結果。問題是我必須使用rowspan創建表以符合要求。 – Raihan

可以定義被應用到所有以前的表單元格時，一類其中一個像這樣徘徊：

jQuery的

$('.table-style td').hover(
    function(){ 
     $(this).prevAll().addClass('hover'); 
    }, 
    function(){  
     $(this).prevAll().removeClass('hover'); 
    } 
);

CSS

.hover{font-weight: bold} /* or whatever the "highlighting needs to be */

來源

2014-04-18 18:52:21 Faust

我已經更新FIDDLE：http://jsfiddle.net/BHVv6/3/ 這幾乎只有一個問題，如：當我將鼠標懸停在項目j它不是像項目一排突出先前的小區3沒有。懸停在項目j上也應該突出顯示項目，項目a，項目b – Raihan

將鼠標懸停在一個表格單元格上會突出顯示一行中的先前單元格

回答

相關問題