jquery - 悬停时仅显示表格一行的隐藏元素

Question

过去一个小时我一直在尝试解决这个问题，但没有成功。也许你们中的一些人可以提供帮助。

我想要做的就是让 glyphicon 在表行悬停时可见，但仅限于那个特定的悬停行。它现在所做的只是将鼠标悬停在任何行上，将使所有隐藏的字形图标可见。

我创建了一个 JSFiddle重现问题，但不知何故它无法正常工作，但你应该明白这一点。

我已经尝试对几乎所有内容使用 :first-child ，但这似乎没有帮助。

jQuery:

$(document).ready(function(){
    $(".table-hover tbody tr td").hover(function() {
        $(".glyphicon.glyphicon-triangle-right:first-child").css("visibility", "visible");
    },
    function () {
        $(".glyphicon.glyphicon-triangle-right:first-child").css("visibility", "hidden");
    });
});

HTML:

<div class="container-fluid text-center">
    <table class="table table-hover">
        <tr>
            <td><a href="#"><span class="glyphicon glyphicon-triangle-right pull-left"></span><span class="label label-info">bla bla</span>SOME TEXT HERE</a></td>
        </tr>
        <tr>
            <td><a href="#"><span class="glyphicon glyphicon-triangle-right pull-left"></span><span class="label label-info">bla bla</span>SOME TEXT HERE</a></td>
        </tr>
        <tr>
            <td><a href="#"><span class="glyphicon glyphicon-triangle-right pull-left"></span><span class="label label-info">bla bla</span>SOME TEXT HERE</a></td>
        </tr>
    </table>
</div>

CSS:

.glyphicon.glyphicon-triangle-right {
  visibility: hidden;
  margin-left: -4px;
  font-size: 20px;
}
.table a {
  display: block;
  text-decoration: none;
  color: #00b6ff;
}
.table a:hover {
  padding-left: -10px;
}
.table-hover tbody tr td, .table-hover tbody tr th {
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  font-size: 17px;
  padding: 15px 0;
}
.table-hover tbody tr:hover td {
  background-color: #d1d1d1;
}

Answer 1

不使用 :first-child，而是像这样使用 jQuery 的 find():

$(document).ready(function() {
  $(".table-hover tbody tr td").hover(function() {
      $(this).find(".glyphicon.glyphicon-arrow-right").css("visibility", "visible");
    },
    function() {
      $(".glyphicon.glyphicon-arrow-right").css("visibility", "hidden");
    });
});

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */


body {
  margin: 10px;
}

.label.label-info {
  margin-right: 10px;
  vertical-align: middle;
}

.glyphicon.glyphicon-arrow-right {
  visibility: hidden;
  margin-left: -4px;
  font-size: 20px;
}

.table a {
  text-decoration: none;
  color: #00b6ff;
}

.table-hover tbody tr td,
.table-hover tbody tr th {
  transition: 0.3s ease-in-out;
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  -ms-transition: 0.3s ease-in-out;
  font-size: 17px;
  padding: 15px 0;
}

.table-hover tbody tr:hover td {
  background-color: #d1d1d1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container-fluid text-center">
    <table class="table table-hover">
      <tr>
        <td><a href="#"><span class="glyphicon glyphicon-arrow-right pull-left"></span><span class="label label-info" style="margin-right: 10px; vertical-align: middle;"></span>hhhhhh</a></td>
      </tr>
      <tr>
        <td><a href="#"><span class="glyphicon glyphicon-arrow-right pull-left"></span><span class="label label-info">Registracija atidaryta!</span>2017.09.01 Rudens pradžios anglų kalbos kursai. Plačiau...</a></td>
      </tr>
      <tr>
        <td><a href="#"><span class="glyphicon glyphicon-arrow-right pull-left"></span>2017.09.01 Rudens pradžios anglų kalbos kursai. Plačiau...</a></td>
      </tr>
      <tr>
        <td><a href="#"><span class="glyphicon glyphicon-arrow-right pull-left"></span>2017.09.01 Rudens pradžios anglų kalbos kursai. Plačiau...</a></td>
      </tr>
      <tr>
        <td><a href="#"><span class="glyphicon glyphicon-arrow-right pull-left"></span>2017.09.01 Rudens pradžios anglų kalbos kursai. Plačiau...</a></td>
      </tr>
    </table>
  </div>