僅在表中的一行顯示隱藏的元素

Question

我一直在試圖解決這個最後一個小時，但沒有成功。也許你們有些人可以幫忙。

我想要做的就是讓表格懸停中可見的圖形，但僅限於特定的懸停行。它現在所做的只是在任何行上徘徊，都會使所有隱藏的圖形符號可見。

我創建了一個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>