Mouse over effect to highlight the crosshair on a table

Question

Mouse over effect to highlight the crosshair on a table

My code currently enables a crosshair function, but I am looking for a way to limit the highlight effect only within the cursor (hover) area.

Instead of highlighting in a "cross" shape, I would like it to show a backward "L" shape. This means that the highlight would only extend down to row 2 and column 3, and up to row 3 and column 2 when hovering over a cell. Is this clear?

This is the CSS code I am using:

table {
    border-collapse: collapse;
    overflow: hidden;
    z-index: 1;
}
.permissions table,
th,
td {
    border: 2px solid #ccc;
    width:90px;
    height:90px;
    text-align:center;
    vertical-align:middle;
    font-size:13px;
}

td, th, .row, .col, .ff-fix {
    cursor: pointer;
    position: relative;
}

tr, col {
    border: 1px solid black;
}

td:hover {
    background-color:red;
}

td:hover:first-child {
    background-color:red;
}

td:hover:nth-child(3n) {
    background-color:red;
}

tr:last-child td:hover {
    background-color:red;
}

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

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

Here is the HTML code:

<table>
    <col /><col /><col />
    <tr>
        <th class="col">First Name</th>
        <th class="col">Middle Name</th>
        <th class="col">Last Name</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Jeffery</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Marie</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Margie</td>
        <td>Ann</td>
        <td>Thatcher</td>
    </tr>
</table>

javascript html css

Answer 1

Answer №1

Although this information is dated, you can find a method utilizing Javascript here. This approach is preferred because it allows for customizable backgrounds without the need for CSS workarounds.

HTML:

<table id="hoverTable">
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    <th>Column4</th>
  </thead>
  <tbody>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
  </tbody>
</table>

SCSS:

body {
  background:grey;
}
.hoverHighlight {
  background-color:yellow !important;
  cursor:default;
}

#hoverTable {
  font-family:arial;
  border-spacing:0;
  border-collapse: collapse;
  th, td {
    border:2px solid black;
    text-align:center;
    padding:5px;
    margin:0;
  }
  th {
    background:#1167b1;
    color:white;
  }
  td {
    text-align:center;
    background:#d0efff;
  }
}

Javascript:

  window.addEventListener('load', function () {
    addHoverEventsAndClasses();
  })

  function toggleHighlight(element, trueOrFalse) {
    const currentRow = returnCurRow(element);
    const index = element.currentTarget.cellIndex;
    const table = document.getElementById('hoverTable').rows;
    for (var i = 0; i < table.length; i++) {
        const data = table[i];
        const cells = data.querySelectorAll(".cell");
        if(data.rowIndex === currentRow) {
            cells.forEach((td) => {
                trueOrFalse ? td.classList.add("hoverHighlight") : td.classList.remove("hoverHighlight");
            });
        }
        cells.forEach((cell) => {
            if(cell.cellIndex === index) {
                trueOrFalse ? cell.classList.add("hoverHighlight") : cell.classList.remove("hoverHighlight");
            }
        });
    }
};

function addHoverEventsAndClasses() {
    const mainTableTDs = document.querySelectorAll("#hoverTable td");
    const mainTableTRs = document.querySelectorAll("#hoverTable tr");
    //Dynamically add class names to each row and cell to target
    addClass(mainTableTDs, "cell");
    addClass(mainTableTRs, "row");
    mainTableTDs.forEach((td) => {
        td.addEventListener("mouseenter", highlightCol); 
        td.addEventListener("mouseleave", removeHighlightCol);
    });
}
//Helper function for adding highlight classes
function addClass(el, cl) {
    el.forEach((child) => {
        child.classList.add(cl);
    });
};
//Toggle highlight functions. Did it this way so multiple arguments could be passed
function highlightCol(e) {
    toggleHighlight(e, true);
}
function removeHighlightCol(e) {
    toggleHighlight(e, false);
}
//Grab the current row
const returnCurRow = (e) => {
    return e.currentTarget.parentElement.rowIndex;
}

Answer 2

Although this information is dated, you can find a method utilizing Javascript here. This approach is preferred because it allows for customizable backgrounds without the need for CSS workarounds.

HTML:

<table id="hoverTable">
  <thead>
    <th>Column1</th>
    <th>Column2</th>
    <th>Column3</th>
    <th>Column4</th>
  </thead>
  <tbody>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
    <tr>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
      <td>Item</td>
    </tr>
  </tbody>
</table>

SCSS:

body {
  background:grey;
}
.hoverHighlight {
  background-color:yellow !important;
  cursor:default;
}

#hoverTable {
  font-family:arial;
  border-spacing:0;
  border-collapse: collapse;
  th, td {
    border:2px solid black;
    text-align:center;
    padding:5px;
    margin:0;
  }
  th {
    background:#1167b1;
    color:white;
  }
  td {
    text-align:center;
    background:#d0efff;
  }
}

Javascript:

  window.addEventListener('load', function () {
    addHoverEventsAndClasses();
  })

  function toggleHighlight(element, trueOrFalse) {
    const currentRow = returnCurRow(element);
    const index = element.currentTarget.cellIndex;
    const table = document.getElementById('hoverTable').rows;
    for (var i = 0; i < table.length; i++) {
        const data = table[i];
        const cells = data.querySelectorAll(".cell");
        if(data.rowIndex === currentRow) {
            cells.forEach((td) => {
                trueOrFalse ? td.classList.add("hoverHighlight") : td.classList.remove("hoverHighlight");
            });
        }
        cells.forEach((cell) => {
            if(cell.cellIndex === index) {
                trueOrFalse ? cell.classList.add("hoverHighlight") : cell.classList.remove("hoverHighlight");
            }
        });
    }
};

function addHoverEventsAndClasses() {
    const mainTableTDs = document.querySelectorAll("#hoverTable td");
    const mainTableTRs = document.querySelectorAll("#hoverTable tr");
    //Dynamically add class names to each row and cell to target
    addClass(mainTableTDs, "cell");
    addClass(mainTableTRs, "row");
    mainTableTDs.forEach((td) => {
        td.addEventListener("mouseenter", highlightCol); 
        td.addEventListener("mouseleave", removeHighlightCol);
    });
}
//Helper function for adding highlight classes
function addClass(el, cl) {
    el.forEach((child) => {
        child.classList.add(cl);
    });
};
//Toggle highlight functions. Did it this way so multiple arguments could be passed
function highlightCol(e) {
    toggleHighlight(e, true);
}
function removeHighlightCol(e) {
    toggleHighlight(e, false);
}
//Grab the current row
const returnCurRow = (e) => {
    return e.currentTarget.parentElement.rowIndex;
}

Answer 3

Answer №2

By following the CSS logic, you can add a full-width ::before and a full-height ::after that will be displayed on top of the table. To change how they appear (such as a cross or a "backward L"), adjust the horizontal and vertical positioning accordingly.

To switch the highlighting to a "backward L", try replacing your td:hover::before and td:hover::after selectors with the code below. Note that the positioning is now determined by the right and bottom properties rather than the original left and top.

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

You can preview how this will look in this JSFiddle link.

Answer 4

By following the CSS logic, you can add a full-width ::before and a full-height ::after that will be displayed on top of the table. To change how they appear (such as a cross or a "backward L"), adjust the horizontal and vertical positioning accordingly.

To switch the highlighting to a "backward L", try replacing your td:hover::before and td:hover::after selectors with the code below. Note that the positioning is now determined by the right and bottom properties rather than the original left and top.

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

You can preview how this will look in this JSFiddle link.

Mouse over effect to highlight the crosshair on a table

Answer №1

Answer №2

Similar questions

The flex container cannot contain all of the content due to an

Begin composing in Excel

Guide for utilizing the Primary Key in a Django context view to display data in an HTML template through a Python for loop

Using values from a select menu in a math calculation without including a decimal point

Is it possible to maintain a fixed footer while utilizing async/ajax functions?

Utilizing ES6 Proxy leads to the occurrence of an error message stating "this is not a function" whenever a function call

"Enhance User Experience with Material UI Autocomplete feature that allows for multiple

What is the best way to update the color of an fa icon when an error message is displayed using PHP

Oops! Looks like there was an issue with assigning to a reference or variable: Error: Uncaught (in promise)

The operation of "grunt build" results in a Lexer Error, causing the ng-include

Guide for dynamically populating Jqgrid Dropdown depending on another dropdown's data选择如何根

iPhone has trouble accessing alternative forms of content

Using the find() function in Mongoose allows the use of a variable as a model

Ongoing state configuration in a React hook

Utilize a randomized dynamic base URL without a set pattern to display a variety of pages

The CSS keyframe for mobile devices initiates from 100% and then proceeds to animate

What is the best way to customize the woocommerce.css file in the parent theme?

Invoke the function when you finish typing in React.js

Unable to establish proper functionality of username variables in Node.js chat application

Which is the Better Choice for an MMO WebSocket Server: Node.js or C++?