WebDevDanno WebDevDanno - 4 months ago 9
HTML Question

Show / hide element inside parent div in jQuery

I want to be able to display an overly of the player name and have the entire box linked to his profile. I am trying to achieve this in jQuery but haven't had much luck. The

a
tag has styling on it so it extends to
100%
of the width and height of the div.

It doesn't seem to be working - I need a second pair of eyes on as I'm probably missing something obvious.

I have this HTML structure

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


and this 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;
}


and the jQuery

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

Answer

You don't need javascript to do that...just adjust the positioning.

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

Comments