Hovering is not working for overlapped div in Html page

June 2, 2022

I am developing web interface for display videos. I have created a table with 4 column. Then I have added header & footer bars. Header bar is for display video name and footer bar is for add play, pause and full screen buttons. When I hover on relevant td those bars should be display accordingly. Now I developed for only one td and header is working as expected but footer is not. Below I have mentioned my code.

.wrapper{
    position: relative;
    width: 80%;
}

.videocontent{
    width: 50%;
    height: 150px;
    background-color: #78b5e9;
}

.videocontent .header {
    position: absolute;
    top: -50px;
    left: 0px;
    width: 50%;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: bold;
    color: #cccccc;
    background: #1f1f1f;
    z-index: 1;
    display: none; 
}

.videocontent .header .text {
    float: left;
    padding-left: 10px !important;
}

.videocontent .footer{
    position: absolute;
    bottom: -50px;
    left: 0px;
    width: 50%;
    color: #ccc;
    background: #1f1f1f;
    z-index: 1;
    display: none; 
}

.videocontent:HOVER .header{
    top: 0px;
    display: block; 
}

.videocontent:HOVER .footer{
    bottom: 0px;
    display: block; 
}

<!DOCTYPE html>
<html>
<body>

    <div>
        <table class="wrapper">
            <tr>
                <td class="videocontent">
                <div id="content1" ></div>
                <div class="header" >[text]</div>
                <div class="footer" ></div>
                </td>

                <td class="videocontent"><div id="content2" ></div></td>
            </tr>
                                        
            <tr>
                <td class="videocontent"><div id="content3" ></div></td>
                <td class="videocontent"><div id="content4" ></div></td>
            </tr>
        </table>
    </div> 

</body>
</html>

>Solution :

Specify position of videocontent as relative then it will work else your footer will be at the bottom of last tr and header will be at top of first row. Irrespective of which td you are hovering.

.wrapper {
  position: relative;
  width: 80%;
}

.videocontent {
  width: 50%;
  height: 150px;
  background-color: #78b5e9;
  position: relative;
}

.videocontent .header {
  position: absolute;
  top: -50px;
  left: 0px;
  width: 50%;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  font-weight: bold;
  color: #cccccc;
  background: #1f1f1f;
  z-index: 1;
  display: none;
}

.videocontent .header .text {
  float: left;
  padding-left: 10px !important;
}

.videocontent .footer {
  position: absolute;
  bottom: -50px;
  left: 0px;
  width: 50%;
  color: #ccc;
  background: #1f1f1f;
  z-index: 1;
  display: none;
}

.videocontent:HOVER .header {
  top: 0px;
  display: block;
}

.videocontent:HOVER .footer {
  bottom: 0px;
  display: block;
}

<!DOCTYPE html>
<html>

<body>

  <div>
    <table class="wrapper">
      <tr>
        <td class="videocontent">
          <div id="content1"></div>
          <div class="header">[text]</div>
          <div class="footer">[footer]</div>
        </td>

        <td class="videocontent">
          <div id="content2"></div>
        </td>
      </tr>

      <tr>
        <td class="videocontent">
          <div id="content3"></div>
        </td>
        <td class="videocontent">
          <div id="content4"></div>
        </td>
      </tr>
    </table>
  </div>

</body>

</html>