Question

我希望能够显示过多的玩家名称，并将整个框链接到他的个人资料中。我试图在jQuery中实现这一点但是没有多少运气。 a标记上有样式，因此它扩展到div的宽度和高度的100%。

它似乎无法正常工作 - 我需要第二双眼睛，因为我可能错过了一些明显的东西。

我有这个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

看看这是否有助于您尝试使用您的代码使其正常工作。（由于某种原因，这是第一次有效。你必须重新运行它）

＆＃13;

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

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

在jQuery中显示/隐藏父div中的元素

4 个答案: