表和鼠標懸停效果（懸停）

Question

我有這張桌子：

<table border="1">
<tr>
    <td></td>
    <td>Banana</td>
    <td>Orange</td>
    <td>Plum</td>
</tr>
<tr>
    <td>Banana</td>
    <td>1:1</td>
    <td>1:2</td>
    <td>1:3</td>
</tr>
<tr>
    <td>Orange</td>
    <td>2:1</td>
    <td>1:1</td>
    <td>1,5:1</td>
</tr>
<tr>
    <td>Plum</td>
    <td>1:3</td>
    <td>2:1</td>
    <td>1:1</td>
</tr>

和CSS：

    td {
    height:60px;
    width:60px;
    text-align:center;
}

td:hover{
    background-color:red;
    }

我想做的是，例如，當我將鼠標指向1：3表格單元格時，它應該與Banana和Plum單元格一起突出顯示。

有任何簡單的方法嗎？

小提琴在這里： http : //jsfiddle.net/CZEJT/

Answer 1

以下是我的一個網站（css）中的示例：

/*when hover over shape 5 dim shape 5*/
#shape5{
opacity:1.0;
filter:alpha(opacity=100);}
#shape5:hover{
opacity:0.4;
filter:alpha(opacity=40);}

/*When hoverover text5 dim shape 5!*/
#text5:hover + #shape5{opacity:0.4;
filter:alpha(opacity=40);}

希望有幫助！！

哦，還可以查看： 將div懸停時如何影響其他元素

Answer 2

如果您不介意使用Javascript來確保兼容性，請查看此JSFiddle

HTML：

<table>
    <tr>
        <th></th><th>50kg</th><th>55kg</th><th>60kg</th><th>65kg</th><th>70kg</th>
    </tr>

    <tr>
        <th>160cm</th><td>20</td><td>21</td><td>23</td><td>25</td><td>27</td>
    </tr>

    <tr>
        <th>165cm</th><td>18</td><td>20</td><td>22</td><td>24</td><td>26</td>
    </tr>

    <tr>
        <th>170cm</th><td>17</td><td>19</td><td>21</td><td>23</td><td>25</td>
    </tr>

    <tr>
        <th>175cm</th><td>16</td><td>18</td><td>20</td><td>22</td><td>24</td>
    </tr>
</table>

CSS：

table {
    border-spacing: 0;
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}

td, th, .ff-fix {
    cursor: pointer;
    padding: 10px;
    position: relative;
}

td:hover::after,
.ff-fix:hover::after { 
    background-color: #ffa;
    content: '\00a0';  
    height: 10000px;    
    left: 0;
    position: absolute;  
    top: -5000px;
    width: 100%;
    z-index: -1;        
}
tr:hover{
  background-color: #ffa;  
}
}

JS：

function firefoxFix() {

    if ( /firefox/.test( window.navigator.userAgent.toLowerCase() ) ) {

        var tds = document.getElementsByTagName( 'td' );

        for( var index = 0; index < tds.length; index++ ) {
            tds[index].innerHTML = '<div class="ff-fix">' + tds[index].innerHTML + '</div>';                     
        };

        var style = '<style>'
            + 'td { padding: 0 !important; }' 
            + 'td:hover::before, td:hover::after { background-color: transparent !important; }'
            + '</style>';
        document.head.insertAdjacentHTML( 'beforeEnd', style );

    };

};

firefoxFix();

Answer 3

嘗試這個：
小提琴

無需更改您的html結構或添加任何第三方庫：

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var tds = document.getElementsByTagName('td');
        for (var i = 0; i < tds.length; i++) {
            var elem = document.getElementsByTagName('td')[i];
            elem.addEventListener('mouseover', function () {
                var text = this.innerHTML;
                for (var j = 0; j < tds.length; j++) {
                    var elem2 = document.getElementsByTagName('td')[j];
                    if (elem2.innerHTML == text) {
                        elem2.style.background = 'red';
                    }
                }
            }, false);
            elem.addEventListener('mouseout', function () {
                for (var j = 0; j < tds.length; j++) {
                    var elem2 = document.getElementsByTagName('td')[j];
                    var text = this.innerHTML;
                    if (elem2.innerHTML == text) {
                        elem2.style.background = 'none';
                    }
                }
            }, false);
        }
    }, false);

</script>

Answer 4

你想類似這樣 ？ 不幸的是，這將是必要的一些JavaScript

的HTML

<table border="1">
    <tr>
        <td></td>
        <td id='1'>Banana</td>
        <td id='2'>Orange</td>
        <td id='3'>Plum</td>
    </tr>
    <tr>
        <td>Banana</td>
        <td class='o1'>1:1</td>
        <td class='o2'>1:2</td>
        <td class='o3'>1:3</td>
    </tr>
    <tr>
        <td>Orange</td>
        <td class='o1'>2:1</td>
        <td class='o2'>1:1</td>
        <td class='o3'>1,5:1</td>
    </tr>
    <tr>
        <td>Plum</td>
        <td class='o1'>1:3</td>
        <td class='o2'>2:1</td>
        <td class='o3'>1:1</td>
    </tr>
</table>

JAVASCRIPT

var cells1 = $('.o1');
cells1.on('mouseover', function(){
    $($(this).parent().children()[0]).css({background: '#ddd'})
    $('#1').css({background: '#ddd'})
})
cells1.on('mouseout', function(){
    $($(this).parent().children()[0]).css({background: 'none'})
    $('#1').css({background: 'none'})
})

var cells2 = $('.o2');
cells2.on('mouseover', function(){
    $($(this).parent().children()[0]).css({background: '#ddd'})
    $('#2').css({background: '#ddd'})
})
cells2.on('mouseout', function(){
    $($(this).parent().children()[0]).css({background: 'none'})
    $('#2').css({background: 'none'})
})

var cells3 = $('.o3');
cells3.on('mouseover', function(){
    $($(this).parent().children()[0]).css({background: '#ddd'})
    $('#3').css({background: '#ddd'})
})
cells3.on('mouseout', function(){
    $($(this).parent().children()[0]).css({background: 'none'})
    $('#3').css({background: 'none'})
})

的CSS

td {
    height:60px;
    width:60px;
    text-align:center;
}

td:hover{
    background-color:red;
}

Answer 5

我很抱歉，我的答案僅是偽代碼，但是我將使用javascript（最有可能是Jquery）來解決此問題。 我希望這是有道理的...

<table id="tbl"> - so I would give the table an ID
<td onHover="changeHeaderColummns(this)"></td> - then on each of the columns have a jsMethod that fires.

<script>
    changeHeaderColumsn(col)
    {
        var colIndex = col.Index; //get the current column index

        var row = GetHeaderRow(); // get the header row

        highLightColumn(row, colIndex); //change the colour of the cell
                                        //with the same index in the header

        row = getCurrentRow(col.RowIndex); //now get the current row

        highlightColumn(row, 0); //change the colour of the cell
                                 //with the index of 0
    }

    getHeaderRow()
    {
         return getRow(0);
    }

    getRow(rowIndex)
    {
        var table = document.getElementByID("tbl);
        return table.rows[rowIndex];
    }

    highlightColumn(row, colIndex)
    {
         row[colIndex].style.backgroundcolor = "red";
    }

Answer 6

使用jquery小提琴： http ： //jsfiddle.net/itsmikem/CZEJT/12/

選項1：突出顯示單元格，僅突出顯示命名的水果單元格

$("td").on({
    "mouseenter":function(){
        $(this).closest("tr").find("td:first-child").css("background","#f99");
        var col = $(this).index();
        $(this).closest("table").find("tr:first-child").find(String("td:nth-child(" + (col + 1) + ")")).css("background","#f99");
        $(this).css("background","#f00");
    },
    "mouseleave":function(){        
        $(this).closest("table").find("td,tr").css("background","none");        
    }
});

選項2：突出顯示與懸停的單元格相交的整個行和列

$("td").on({
    "mouseenter": function () {
        $(this).closest("tr").css("background", "#f99");
        var col = $(this).index();
        var myTable = $(this).closest("table");
        var rows = $(myTable).find("tr");
        $(rows).each(function (ind, elem) {
            var sel = String("td:nth-child(" + (col + 1) + ")");
            $(this).find(sel).css("background", "#f99");
        });
        $(this).css("background", "#f00");
    },
        "mouseleave": function () {
        $(this).closest("table").find("td,tr").css("background", "none");
    }
});

Answer 7

對於突出顯示列，您必須使用jsfiddler這樣的js。 它適用於jQuery;）

With code