Question

这似乎应该是直截了当的，我已经搜索了高低的答案。

注意事项：

我试图制作一个菜单系统。最后，我想悬停一个TH以显示下面的TD。
由于限制（降价）
我只能使用HTML，CSS和LESS
我无法使用Javascript或jQuery

我已经尝试过多种方式，但下面的代码是我尝试完成的基本示例。

＆＃13;

table th:nth-child(1):hover { 
    color: red;
    > td:nth-child(1) { color: red; } 
}
table th:nth-child(2):hover { 
    color: red;
    + td:nth-child(2) { color: red; } 
}
table th:nth-child(3):hover { 
    color: red;
    td:nth-child(3) { color: red; } 
}

＆＃13;

<table>
<thead><tr><th>Menu 1</th><th>Menu 2</th><th>Menu 3</th></tr></thead>
<tbody>
<tr>
<td>menu 1 item</td>
<td>menu 2 item</td>
<td>menu 3 item</td>
</tr>
</tbody>
</table>

＆＃13;

当悬停在TH上时，我想要一些适用于TD的东西。

非常感谢任何帮助！

Answer 1

如果元素是兄弟姐妹，你可以使用+或〜但在你的情况下，似乎他们没有任何关系所以你可能想要使用JS

问题类似于On a CSS hover event, can I change another div's styling?

Answer 2

由于td元素不在th元素内且th元素与tds不在同一级别，您想要的内容可以＆＃39}。只用CSS完成。您唯一的选择可能是某种类型的JS解决方案或重做标记以使用divs，这样您就可以模仿表格外观/行为，但控制层次结构以便可用的CSS选择器工作。

Answer 3

不幸的是，单凭CSS你无法做到这一点。我创建了一个简单的脚本，可以处理将活动类添加到th和相应的td：

＆＃13;

$(document).ready(() => {
  $('th').hover( (e) => {
    const index = $(e.target).index();
    $(e.target).toggleClass('active-row');
    const activeCell = $('tbody td')[index];
    $(activeCell).toggleClass('active-cell');
  });
});

＆＃13;

.active-row {
  color: red;
}
.active-cell {
  color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Menu 1</th>
      <th>Menu 2</th>
      <th>Menu 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>menu 1 item</td>
      <td>menu 2 item</td>
      <td>menu 3 item</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 4

$(document).ready(function() {
  $('.table td').hover(function() {
      var t = parseInt($(this).index()) + 1;
      $('.table td:nth-child(' + t + ')').addClass('highlighted');
    },
    function() {
      var t = parseInt($(this).index()) + 1;
      $('.table td:nth-child(' + t + ')').removeClass('highlighted');
    });
});

.highlighted {
  color: blue;
  font-weight:bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
  <tbody>
    <tr>
      <td width="25%">A</td>
      <td width="25%">B</td>
      <td width="25%">C</td>
    </tr>
    <tr>
      <td>apple</td>
      <td>banana</td>
      <td>grapes</td>
    </tr>

    <tr>
      <td>apple1</td>
      <td>banana1</td>
      <td>grapes1</td>
    </tr>

    <tr>
      <td>apple2</td>
      <td>banana2</td>
      <td>grapes2</td>
    </tr>
  </tbody>
</table>

Answer 5

据我所知，如果你不能使用Javascript或jQuery，就没有解决办法。

⋅ ⋅ ⋅

无论如何，如果你可以修改你的html结构，以便能够使用直接兄弟选择器，
（我知道它不再是典型的桌子结构......）
并添加一些样式，你可以实现这样的结果：

table {
  border-collapse: collapse;
  border: 0px solid black;
  padding: 0;
}

table th, table td {
  width: 120px;
  background: #ddd;
  text-align: center;
}

table td {
  display: none;
  position: absolute;
  transform: translate(-100%, 100%);
  background: #eee;
}

table th:hover+td,
table td:hover {
  display: block;
}

table th:hover, table td:hover {
  color: red;
}

<table>
  <tbody>
    <tr>
      <th>Menu 1</th>
      <td>menu 1 item</td>
      <th>Menu 2</th>
      <td>menu 2 item</td>
      <th>Menu 3</th>
      <td>menu 3 item</td>
    </tr>
  </tbody>
</table>

我希望它有所帮助。

CSS - 表格 - TH悬停设置TD可见性

5 个答案: