Hover in line and table column

Question

Hover in line and table column

Navigation

#1 by (3 votes)
#2 by (0 votes)

0

I would like to move the mouse over a table cell to the column and its cell line to change the background only to the cell. Here is an example of how this and how I want it to stay:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

</body>
</html>

In this case my mouse was on Helen Bennett

jquery html5 css3

asked by anonymous 01.12.2017 / 16:50

2 answers

0

You can also do this using only CSS:

// para IE 9+ que não suportam clip-path
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);

div{
   position: relative;
}

table{
   clip-path: inset(2px 0 0 2px);
}

table tr:first-child th{
   background: #fff;
}

th, td {
  padding: 5px;
  position: relative;
}

td:hover::before
 { 
  content: '';  
  height: 100%;
  top: 0px;
  position: absolute;  
  right: 0px;
  width: 10000px;
  z-index: -1;
  background-color: red;
}

td:hover::after
 { 
  content: '';  
  height: 10000px;
  left: 0;
  position: absolute;  
  bottom: 0px;
  width: 100%;
  z-index: -1;
  background-color: red;
}

/* hack para IE 9+ que não suportam clip-path*/
html[data-useragent*='rv:11.0'] table,
html[data-useragent*='Edge'] table,
html[data-useragent*='MSIE 10.0'] table,
html[data-useragent*='MSIE 9.0'] table{
  position: absolute;
  top: 0;
  left: 0;
  clip: rect(2px, 10000px, 10000px, 2px);
}

<div>
   <table>
     <tr>
       <th>Company</th>
       <th>Contact</th>
       <th>Country</th>
     </tr>
     <tr>
       <td>Alfreds Futterkiste</td>
       <td>Maria Anders</td>
       <td>Germany</td>
     </tr>
     <tr>
       <td>Centro comercial Moctezuma</td>
       <td>Francisco Chang</td>
       <td>Mexico</td>
     </tr>
     <tr>
       <td>Ernst Handel</td>
       <td>Roland Mendel</td>
       <td>Austria</td>
     </tr>
     <tr>
       <td>Island Trading</td>
       <td>Helen Bennett</td>
       <td>UK</td>
     </tr>
     <tr>
       <td>Laughing Bacchus Winecellars</td>
       <td>Yoshi Tannamuri</td>
       <td>Canada</td>
     </tr>
     <tr>
       <td>Magazzini Alimentari Riuniti</td>
       <td>Giovanni Rovelli</td>
       <td>Italy</td>
     </tr>
   </table>
</div>

01.12.2017 / 19:57

CONDITIONS IF STRUCTURE and an if inside another How to display DIV if the radio is dialed?

score 3 · Accepted Answer

See if that helps you. :)

$('td').on('mouseover', function() {
  let elem = [$(this), $(this).prevAll('td'), $(this).parent().prevAll('tr').children('td[data-col=' + $(this).data('col') + ']')];

  $(elem).each(function() {
    $(this).css('background-color', '#ddd');
  });
}).on('mouseout', function() {
  let elem = [$(this), $(this).prevAll('td'), $(this).parent().prevAll('tr').children('td[data-col=' + $(this).data('col') + ']')];

  $(elem).each(function() {
    $(this).css('background-color', 'transparent');
  });
});

th,
td {
  padding: 5px;
  border: #ccc 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><th>Company</th><th>Contact</th><th>Country</th></tr><tr><tddata-col="1">Alfreds Futterkiste</td>
    <td data-col="2">Maria Anders</td>
    <td data-col="3">Germany</td>
  </tr>
  <tr>
    <td data-col="1">Centro comercial Moctezuma</td>
    <td data-col="2">Francisco Chang</td>
    <td data-col="3">Mexico</td>
  </tr>
  <tr>
    <td data-col="1">Ernst Handel</td>
    <td data-col="2">Roland Mendel</td>
    <td data-col="3">Austria</td>
  </tr>
  <tr>
    <td data-col="1">Island Trading</td>
    <td data-col="2">Helen Bennett</td>
    <td data-col="3">UK</td>
  </tr>
  <tr>
    <td data-col="1">Laughing Bacchus Winecellars</td>
    <td data-col="2">Yoshi Tannamuri</td>
    <td data-col="3">Canada</td>
  </tr>
  <tr>
    <td data-col="1">Magazzini Alimentari Riuniti</td>
    <td data-col="2">Giovanni Rovelli</td>
    <td data-col="3">Italy</td>
  </tr>
</table>