在jQuery的父div中顯示/隱藏元素

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

看看這是否有助於您嘗試使用代碼使其正常工作。（由於某種原因，這是第一次成功。您必須重新運行它）

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