显示引导表中悬停行的glyphicon

Question

我想在我悬停的行旁边显示和更改bootstrap glyphicon的颜色。

这是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>

这是我覆盖引导程序表边框的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并为其添加颜色

修改

  

好的，但我希望其他人被隐藏？

仅使用CSS的新版本，使用visibility

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

旧版本 - sice这个问题被误解了 你可以使用jQuery。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;