Hover does not work

Question

.csgo-player {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.csgo-player-link {
  width: 40%;
  position: relative;
}

.csgo-player-info {
  padding: 10px;
  height: 200px;
  width: 100%;
  background-color: green;
  position: absolute;
  display: none;
}

.csgo-player-link:hover .csgo-player-info {
  display: block;
  position: absolute;
  z-index: -1;
}

<li class="csgo-player">
  <a href="#" class="csgo-player-link">
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="">
    <div class="csgo-player-info">
      <header class="csgo-player-header">
        <h2 class="csgo-player-header__title">arT</h2>
        <span>Andrei Piovezan - IGL</span>
      </header>
      <div class="csgo-player-socials">
        <ul class="csgo-player-social-list">
          <li class="csgo-player-social-item"></li>
          <li class="csgo-player-social-item"></li>
          <li class="csgo-player-social-item"></li>
        </ul>
        <a href="#" class="csgo-player-download">Download CFG
                <i class="csgo-player-download__arrow"></i>
             </a>
      </div>
    </div>
  </a>
</li>

I want that when I give one Hover in the .csgo-player-link, the .csgo-player-info appear... someone can help me?

Answer 1

Briefly, the problem is that your HTML is very poorly structured.

• The code starts with a <li> loose;
  • Here we can even consider that you omitted the rest of the code, but it’s just an assumption.
• You have an anchor <a> that is not an anchor;
  • Anchors are elements that provide navigation, but you are only using to have one hover.
• You have child elements inside an anchor that make no sense;
  • Anchor child list? Does it make sense to click on the list and be redirected to the other page? It seems that is not the case.
  • And the main problem: one anchor as another anchor’s daughter? Doesn’t that make any sense.

Reducing your code to the minimum verifiable you basically have:

<a href="//url_A">
    <a href="//url_B">Clique aqui</a>
</a>

If I click on "Click here", I go to the page "//url_A" or "//url_B"?

<a href="//url_A">
  <a href="//url_B">Clique aqui</a>
</a>

When inspecting the page, you will see:

It’s exactly this conflict that breaks your code. Simply inspect your page to evaluate which HTML the browser has processed:

Realize it has nothing to do with the code you originally wrote.

To solve the problem, you’ll need to fix the structure of your HTML to something that makes sense, mainly by fixing this non-anchor anchor.

.csgo-player {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.csgo-player-link {
  width: 40%;
  position: relative;
}

.csgo-player-info {
  padding: 10px;
  height: 200px;
  width: 100%;
  background-color: green;
  position: absolute;
  display: none;
}

.csgo-player-link:hover .csgo-player-info {
  display: block;
  position: absolute;
  z-index: -1;
}

<div href="#" class="csgo-player-link">
  <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="">
  <div class="csgo-player-info">
    <header class="csgo-player-header">
      <h2 class="csgo-player-header__title">arT</h2>
      <span>Andrei Piovezan - IGL</span>
    </header>
    <div class="csgo-player-socials">
      <ul class="csgo-player-social-list">
        <li class="csgo-player-social-item"></li>
        <li class="csgo-player-social-item"></li>
        <li class="csgo-player-social-item"></li>
      </ul>
      <a href="#" class="csgo-player-download">Download CFG
                <i class="csgo-player-download__arrow"></i>
             </a>
    </div>
  </div>
</div>

Answer 2

By HTML specifications, it is incorrect to use element <a> within another <a> as you are doing. By doing this, the browser will automatically close the first <a>, causing the second <a> becomes a separate element from the first <a>, how the print shows:

With that, the selector .csgo-player-link:hover .csgo-player-info if makes it invalid.

In this case, use a div instead of <a>, and place in the class .csgo-player-link the property cursor: pointer to change the mouse cursor in the div so that the user realizes that there is some interaction there:

.csgo-player {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.csgo-player-link {
  width: 40%;
  position: relative;
  cursor: pointer; /*ALTERA O CURSOR*/
}

.csgo-player-info {
  padding: 10px;
  height: 200px;
  width: 100%;
  background-color: green;
  position: absolute;
  display: none;
}

.csgo-player-link:hover .csgo-player-info {
  display: block;
  position: absolute;
  z-index: 0;
}

<ul>
   <li class="csgo-player">
     <div class="csgo-player-link">
       <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="">
       <div class="csgo-player-info">
         <header class="csgo-player-header">
           <h2 class="csgo-player-header__title">arT</h2>
           <span>Andrei Piovezan - IGL</span>
         </header>
         <div class="csgo-player-socials">
           <ul class="csgo-player-social-list">
             <li class="csgo-player-social-item"></li>
             <li class="csgo-player-social-item"></li>
             <li class="csgo-player-social-item"></li>
           </ul>
           <a href="#" class="csgo-player-download">Download CFG
                   <i class="csgo-player-download__arrow"></i>
                </a>
         </div>
       </div>
     </div>
   </li>
</ul>

Answer 3

Exchange the to for div; I believe that to does not have characteristics that make it possible to do this as the div. I saw it here http://jsfiddle.net/zEJVK/6/

.cp-Thumb:Hover . cp-Hover { display:block; }

.csgo-player {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.csgo-player-link {
  width: 40%;
  position: relative;
}

.csgo-player-info {
  padding: 10px;
  height: 200px;
  width: 100%;
  background-color: green;
  position: absolute;
  display: none;
}

.csgo-player-link:hover .csgo-player-info {
  display: block;
  position: absolute;
  z-index: -1;
}

<li class="csgo-player">
  <div href="#" class="csgo-player-link">
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="">
    <div class="csgo-player-info">
      <header class="csgo-player-header">
        <h2 class="csgo-player-header__title">arT</h2>
        <span>Andrei Piovezan - IGL</span>
      </header>
      <div class="csgo-player-socials">
        <ul class="csgo-player-social-list">
          <li class="csgo-player-social-item"></li>
          <li class="csgo-player-social-item"></li>
          <li class="csgo-player-social-item"></li>
        </ul>
        <a href="#" class="csgo-player-download">Download CFG
                <i class="csgo-player-download__arrow"></i>
             </div>
      </div>
    </div>
  </a>
</li>

Answer 4

Just you put a target for the Hover, like this: .csgo-player-link:hover .csgo-player-info{ display:block;}By default target is the element itself.