Question

我有下面的代码，非常适合十字准线功能。这很好，但是想知道是否有办法停止光标之外的高光（悬停）。

例如，代替“十字”形状突出显示，您最终会得到一个向后的“L”形状突出显示。因此，而不是突出显示整行和＆amp;列只会突出显示第3列到第2行，第2行只显示第3列。没有扩展突出显示。希望有道理吗？

这是我的css代码：

processPayment(List<CreditCard> creditCards)

这是我的HTML代码：

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

Answer 1

遵循CSS的逻辑，您应用全宽::before和全高::after，它们会显示在表格上。要调整这些显示方式（十字与“向后L”），请调整相应的水平和垂直位置。

尝试使用以下内容替换td:hover::before和td:hover::after选择器，将突出显示显示为“向后L”。请注意，使用right和bottom规则集设置定位，而不是使用left和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;        
}

了解它在this JSFiddle中的外观。

Answer 2

我知道这很旧，但是here's a method using Javascript。我更喜欢这种方法，因为它允许自定义背景，并且不需要 CSS 解决方法。

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

十字架突出显示悬停表

2 个答案: