テーブルの1行だけ、ホバー上に隠れ要素を表示する

Question

私はこれを直近1時間に解決しようとしていますが、失敗しています。多分あなたの何人かが助けてくれるかもしれません。

私がしたいのは、テーブル行のホバー上にグリフコンを表示することですが、特定のホバーされた行だけにします。すべての行にホバリングしているだけで、すべての隠しグリフコンが表示されます。

問題を再現するために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

代わりのを使用して、そのように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>