表格和鼠标悬停效果（悬停）答案

【问题标题】：Table and mouse rollover effect (hover)表格和鼠标悬停效果（悬停）
【发布时间】：2013-11-23 07:40:54
【问题描述】：

我有这张桌子：

<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/

【问题讨论】：

使用 css 你可以突出显示行...但是对于列你必须使用 js，使用 css 我的最大值是：jsfiddle.net/CZEJT/6

标签： javascript html css hover html-table

【解决方案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);}

希望有帮助！！

哦，另请查看：How to affect other elements when a div is hovered

【讨论】：

【解决方案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();

【讨论】：

这太棒了！ :-)
唯一的问题是，如果您停留在突出显示的单元格上，则行或列的突出显示不会像您预期的那样移动。
你能解释一下你的期望吗，我会看看更新:)

【解决方案3】：

试试这个：
Fiddle

无需更改您的 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>

【讨论】：

【解决方案4】：

您想要this 之类的东西吗？不幸的是，需要一些 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;
}

【讨论】：

【解决方案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";
    }

【讨论】：

【解决方案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");
    }
});

【讨论】：

【解决方案7】：

对于高亮列，您必须使用像 jsfiddler 这样的 js。它适用于 jQuery ;)

With code

【讨论】：