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＆＃39; find()：

＆＃13;

$(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");
    });
});

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

仅在悬停时显示隐藏元素，仅用于表格的一行

1 个答案: