html - 在 bootstrap 表中显示悬停行的字形

Question

我只想在悬停的行旁边显示和更改 Bootstrap 字形图标的颜色。

这是 HTML:

<table class="table table-hover table-responsive">
    <tbody>
        <tr>
            <td><span class="glyphicon glyphicon-hand-right"></span></td>
            <td class="text-center">something</td>
            <td class="text-center ">something</td>
            <td class="text-danger text-center">something</td>
        </tr>
    </tbody>
</table>

这是我覆盖 Bootstrap 表边框的 CSS，因为我不需要(可能会更好)

.custom-table {
    border-bottom:0px !important;
}

.custom-table th, .table td {
    border: 0px !important;
}

.fixed-table-container {
    border:0px !important;
}

.table-hover tbody tr:hover td, .table-hover tbody tr:hover th {
    border:0px !important;
}

.table-hover > tbody > tr:hover span, .table-hover > tbody > tr:hover {
    background-color: transparent;
 }

它目前的样子:

我希望它看起来如何(如果我将鼠标悬停在该行上):

只能用css/html可以吗？

Answer 1

只需使用 :hover ，然后添加 .glyphicon-hand-right 和颜色

编辑

Okay but I want the others to be hidden?

新版本仅使用 CSS，使用 visibility

.custom-table {
  border-bottom: 0px !important;
}

.custom-table th,
.table td {
  border: 0px !important;
}

.fixed-table-container {
  border: 0px !important;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  border: 0px !important;
}

.table-hover>tbody>tr:hover span,
.table-hover>tbody>tr:hover {
  background-color: transparent;
}

.table-hover>tbody>tr .glyphicon-hand-right {
  visibility: hidden
}

.table-hover>tbody>tr:hover .glyphicon-hand-right {
  color: blue;
  visibility: visible
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover table-responsive">
  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-hand-right"></span></td>
      <td class="text-center">something</td>
      <td class="text-center ">something</td>
      <td class="text-danger text-center">something</td>
    </tr>
    <tr>
      <td><span class="glyphicon glyphicon-hand-right"></span></td>
      <td class="text-center">something</td>
      <td class="text-center ">something</td>
      <td class="text-danger text-center">something</td>
    </tr>
  </tbody>
</table>

旧版本 - 因为这个问题被误解了然后你可以使用 jQuery。

$('.table-hover>tbody>tr').hover(function() {
  $(this).siblings().find('.glyphicon-hand-right').hide()
}, function() {
  $(this).siblings().find('.glyphicon-hand-right').show()
})

.custom-table {
  border-bottom: 0px !important;
}

.custom-table th,
.table td {
  border: 0px !important;
}

.fixed-table-container {
  border: 0px !important;
}

.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
  border: 0px !important;
}

.table-hover>tbody>tr:hover span,
.table-hover>tbody>tr:hover {
  background-color: transparent;
}

.table-hover>tbody>tr:hover .glyphicon-hand-right {
  color: blue
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-hover table-responsive">
  <tbody>
    <tr>
      <td><span class="glyphicon glyphicon-hand-right"></span></td>
      <td class="text-center">something</td>
      <td class="text-center ">something</td>
      <td class="text-danger text-center">something</td>
    </tr>
    <tr>
      <td><span class="glyphicon glyphicon-hand-right"></span></td>
      <td class="text-center">something</td>
      <td class="text-center ">something</td>
      <td class="text-danger text-center">something</td>
    </tr>
  </tbody>
</table>