Question

我是CSS3的新手，我现在已经尝试过几个小时了，我似乎无法做到这一点。我忍不住认为这是我看不到的非常简单的事情。

这是我的表格：

<table border="0" cellpadding="0" cellspacing="0" class="gridtable">
    <tr>
        <th>US State:</th>
        <th>Abbreviation:</th>
        <th>US State:</th>
        <th>Abbreviation:</th>
    </tr>
    <tr class="state">
        <td class="left">Alabama</td>
        <td>AL</td>
        <td class="left">Montana</td>
        <td>MT</td>
    </tr>
    <tr class="state">
        <td class="left">Alaska</td>
        <td>AK</td>
        <td class="left">Nebraska</td>
        <td>NE</td>
    </tr>
</table>

当用户在状态或缩写上悬停时，我想设置状态单元格和它的缩写。凭借我有限的技能，当用户使用以下CSS将鼠标悬停在州名上时，我能够使用它：

table.gridtable td.left:hover,
.left:hover + td {
    background-color: pink;
}

以下是表格的其他相关CSS代码：

table.gridtable {
    width: 100%;
    font-family: verdana,arial,sans-serif;
    font-size: 11px;
    color: #333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}

table.gridtable th {
    font-size: 14px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #666666;
    background-color: #dedede;
}

table.gridtable td {
    border-width: 1px;
    padding: 8px;
    text-align: center;
    border-style: solid;
    border-color: #666666;
    background-color: #ffffff;
}

table.gridtable td.left {
    border-width: 1px;
    padding: 8px;
    text-align: left;
    border-style: solid;
    border-color: #666666;
    background-color: #d3eef5;
}

页面上还有另一个表格，但不应该以相同的方式设置表格。

我希望这足以说明我的意思。如果没有，请告诉我。

Answer 1

你在你的css中使用了'table.gridtable'（对于背景高亮css也是如此），所以如果你想在第二个表中不应该应用相同的css，那么你可以在第一个表中再添加一个类，然后使用它（突出显示）。因此，该特定的css仅适用于您想要的表格。

或者，您甚至可以为'td'执行此操作。

所以，你的代码会变成这样的东西 -

<table border="0"     cellpadding="0" cellspacing="0" class="gridtable gridtable1">

table.gridtable1 td.left:hover,
.left:hover + td {
    background-color: pink;
}

我希望，你正在寻找类似的东西。

修改

我在缩写abbr -
中添加了一个班级td
<table border="0" cellpadding="0" cellspacing="0" class="gridtable"> <tr> <th>US State:</th> <th>Abbreviation:</th> <th>US State:</th> <th>Abbreviation:</th> </tr> <tr class="state"> <td class="left">Alabama</td> <td class="abbr">AL</td> <td class="left">Montana</td> <td class="abbr">MT</td> </tr> <tr class="state"> <td class="left">Alaska</td> <td class="abbr">AK</td> <td class="left">Nebraska</td> <td class="abbr">NE</td> </tr> </table>

jQuery代码 -

jQuery(document).ready(function($){ $("table.gridtable").find("td.left").hover(function(){ $(this).next().css("background-color", "pink"); $(this).css("background", "none"); }); $("table.gridtable").find("td.abbr").hover(function(){ $(this).prev().css("background-color", "pink"); $(this).css("background", "none"); }); });

Answer 2

这里的问题是您尝试使用元素来更改前一个元素。虽然我们有后续兄弟姐妹用css改变的方法，但是没有以前的兄弟选择器。

我看到的唯一解决方案是Javascript方法。我将为您提供基本的js功能，纯粹的香草，但当然像JQuery这样的框架会让您的生活更轻松：

var tds = document.querySelectorAll('.left');
for(var i=0; i<tds.length; i++) {
    var td = tds[i];

    //Assign the mouse over/out events for a hover effect
    td.onmouseover = 
    td.onmouseout = 
    td.nextElementSibling.onmouseover = 
    td.nextElementSibling.onmouseout = function() {

        //Checks which one is the sibiling
        var sibling = this.matches('.left') ?
                this.nextElementSibling : this.previousElementSibling;

        //Verifies if any of them are hovered
        if(this.matches(':hover') || sibling.matches(':hover')) {
            this.style.backgroundColor = sibling.style.backgroundColor = 'pink';
        }
        else {
            this.style.backgroundColor = sibling.style.backgroundColor = '';
        }
    }
}

这会模拟悬停效果，也许您需要改进样式更改部分，可能会指定一个类或其他东西。

但至少它正在发挥作用，无论你是哪一个人都在盘旋。

工作小提琴：http://jsfiddle.net/1kox1abo/1/

Answer 3

以下来自@LcSalazar的解决方案正是我所寻找的。

因为我试图自己解决这个问题，而且我对JavaScript的了解并不多，所以我最终将数据拆分为2个表，将它们放在一起并将表格排成一行。 / p>

<div class="container">
 <div class="right">
  <table border="0" cellpadding="0" cellspacing="0" class="gridtable">
    <tr>
      <th>US State:</th>
      <th>Abbreviation:</th>
    </tr>
    <tr class="state">
      <td class="left">Alabama</td>
      <td>AL</td>
    </tr>
    <tr class="state">
      <td class="left">Alaska</td>
      <td>AK</td>
    </tr>
  </table>
</div>
<div class="left">
  <table border="0" cellpadding="0" cellspacing="0" class="gridtable">
    <tr>
        <th>US State:</th>
        <th>Abbreviation:</th>
    </tr>
    <tr class="state">
        <td class="left">Montana</td>
        <td>MT</td>
    </tr>
    <tr class="state">
        <td class="left">Nebraska</td>
        <td>NE</td>
    </tr>
    <tr class="state">
        <td class="left">Nevada</td>
        <td>NV</td>
    </tr>
  </table>
 </div>
</div>

然后：

/* CSS to Highlight each row on hover */
table.gridtable .state:hover td {
    background-color: LightSkyBlue;
}

CodePen上的完整解决方案（所有状态和CSS）：http://codepen.io/petarmihaylov/pen/xGFqi/

当悬停在其中任何一个元素上时，如何突出显示tr元素的前2个td元素？

3 个答案: