Показать/скрыть элемент внутри родительского div в jQuery

Question

Я хочу иметь возможность отображать чрезмерное имя игрока и привязывать весь ящик к его профилю. Я пытаюсь достичь этого в jQuery, но не имел большой удачи. Тег a имеет на нем стиль, поэтому он простирается до 100% ширины и высоты div.

Кажется, что он не работает - мне нужна вторая пара глаз, так как мне, вероятно, не хватает чего-то очевидного.

У меня есть этот HTML структуру

<div class="player"> 
<a href="/player?PlayGuid=123"> 
    <div class="player__name"> 
     <h4>Player Name</h4> 
    </div> 
</a> 
<div class="player__thumbnail"> 
    <img src="player.jpg" alt="player desc" /> 
</div> 
</div> 

и этот CSS

.player { 
     position: relative; 
     z-index: 1; 
     max-width: 250px; 
     width: 250px; 
     height: 250px; 
     max-height: 250px; 
     text-align: center; 
     cursor: pointer; 
    } 

    .player a { 
     display: none; 
     height: 100%; 
     max-width: 100%; 
     z-index: 12; 
    } 

    .player__name { 
     position: absolute; 
     top: 0; 
     left: 0; 
     background-color: rgba(44, 42, 102, 0.6); 
     color: #FFFFFF; 
     width: 100%; 
     height: 100%; 
     z-index: 10; 
    } 

    .player__thumbnail { 
     position: absolute; 
     top: 0; 
     left: 0; 
     width: 100%; 
     height: 100%; 
     z-index: 3; 
    } 

    .player__thumbnail img { 
     width: 100%; 
     max-width: 100%; 
     height: auto; 
    } 

и JQuery

$(document).ready(function(){ 
     $('.player').hover(
      function() { 
      $(this).closest('a').show(); 
      }, 
      function() { 
      $(this).closest('a').hide(); 
      } 
     ); 
    }); 

Answer 1

Вам не нужно JavaScript, чтобы сделать это ... просто настроить позиционирование.

.player { 
 
    position: relative; 
 
    z-index: 1; 
 
    max-width: 250px; 
 
    width: 250px; 
 
    height: 250px; 
 
    max-height: 250px; 
 
    text-align: center; 
 
    cursor: pointer; 
 
} 
 
.player a { 
 
    display: none; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(44, 42, 102, 0.6); 
 
    color: #FFFFFF; 
 
} 
 
.player:hover a { 
 
    display: block; 
 
}

<div class="player"> 
 
    <a href="/player?PlayGuid=123"> 
 
    <div class="player__name"> 
 
     <h4>Player Name</h4> 
 
    </div> 
 
    </a> 
 
    <div class="player__thumbnail"> 
 
    <img src="http://www.fillmurray.com/250/250" alt="player desc" /> 
 
    </div> 
 
</div>

Answer 2

$.closest() поиски через родителей Элементом, а не ее детей. Вероятно, вы должны использовать $('a', this), чтобы выбрать дочернего элемента <a>.

Answer 3

Изменить HTML для

<div class="player"> 
    <a id="name" href="/player?PlayGuid=123"> 
    <div class="player__name"> 
     <h4>Player Name</h4> 
    </div> 
    </a> 
    <div class="player__thumbnail"> 
    <img src="player.jpg" alt="player desc" /> 
    </div> 
</div> 

И Javascript для

$(document).ready(function() { 
    $('.player').hover(function() { 
    $('#name').toggle('display'); 
    }); 
}); 

Answer 4

Смотрите, если это поможет вам попытались использовать свой код, чтобы сделать его работу. (По некоторым причинам это работает в первый раз. U должен был повторно запустить это)

$(document).ready(function(){ 
 

 
    $('.player').hover(
 
      function() { 
 
      $(this).append($("a").html()); 
 
      }, 
 
      function() {   
 
      var ss = $(".player__name");    
 
       ss.remove(); 
 
      } 
 
     ); 
 
});

.player { 
 
     position: relative; 
 
     z-index: 1; 
 
     max-width: 250px; 
 
     width: 250px; 
 
     height: 250px; 
 
     max-height: 250px; 
 
     text-align: center; 
 
     cursor: pointer; 
 
    } 
 

 
    .player a { 
 
     display: none; 
 
     height: 100%; 
 
     max-width: 100%; 
 
     z-index: 12; 
 
    } 
 

 
    .player__name { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     background-color: rgba(44, 42, 102, 0.6); 
 
     color: #FFFFFF; 
 
     width: 100%; 
 
     height: 100%; 
 
     z-index: 10; 
 
    } 
 

 
    .player__thumbnail { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     width: 100%; 
 
     height: 100%; 
 
     z-index: 3; 
 
    } 
 

 
    .player__thumbnail img { 
 
     width: 100%; 
 
     max-width: 100%; 
 
     height: auto; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 

 
<div class="player"> 
 
<a href="/player?PlayGuid=123" id="play1"> 
 
    <div class="player__name"> 
 
     <h4>Player Name</h4> 
 
    </div> 
 
</a> 
 
<div class="player__thumbnail"> 
 
    <img src="player.jpg" alt="player desc" /> 
 
</div> 
 
</div>