Table and mouse rollover effect (hover)

Question

I have this table:

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

and CSS:

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

td:hover{
    background-color:red;
    }

What I want to do, is when I for example point my mouse on 1:3 table cell, it should highlight together with Banana and Plum cells.

Any easy way to do it?

Here's fiddle: http://jsfiddle.net/CZEJT/

with css you can highligh the row... but for the column you must use js, with css my max is: http://jsfiddle.net/CZEJT/6/ — Selena Golieador, Nov 11 '13 at 13:40

score 2 · Answer 1 · edited May 23 '17 at 10:31

2

below is an example from one of my sites (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);}

Hope that helps!!

Oh Also view: How to affect other elements when a div is hovered

edited May 23 '17 at 10:31

Community

1
1

answered Nov 11 '13 at 13:29

justsimpleshh

97
1
10

score 2 · Accepted Answer · answered Nov 11 '13 at 13:32

If you dont mind a bit of Javascript in there to ensure compatibility, take a look at this 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();

The only issue with this, is if you stay on the highlighted cells the highlighting of the rows or columns do not move as you would expect. — Squirrel5853, Nov 11 '13 at 13:44
Can you exlpain what you expect and I'll have a look at updating :) — SW4, Nov 11 '13 at 14:06

Vicky Gonsalves · Answer 3 · 2013-11-11T13:39:42.217

Try this:
Fiddle

Without changing your html structure or adding any third party library:

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

score 1 · Answer 4 · answered Nov 11 '13 at 13:37

would you like something like this? unfortunately it would be necessary some 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;
}

Squirrel5853 · Answer 5 · 2013-11-11T13:49:38.833

I apologise that my answer is only in pseudo code, however I would approach this problem by using javascript (most possibly Jquery). I hope this makes sense...

<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";
    }

itsmikem · Answer 6 · 2013-11-11T15:09:00.210

Using jquery fiddle: http://jsfiddle.net/itsmikem/CZEJT/12/

Option 1: highlights the cell and just the named fruit cells

$("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");        
    }
});

Option 2: highlights entire rows and columns that intersect the hovered cell

$("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");
    }
});

score 0 · Answer 7 · answered Nov 11 '13 at 13:51

0

for highlight columns you must use js like this jsfiddler. It's work with jQuery ;)

With code

answered Nov 11 '13 at 13:51

Selena Golieador

73
7

Table and mouse rollover effect (hover)

7 Answers7