R. Bandi R. Bandi - 3 years ago 107
Javascript Question

display a content on footer after hover

Sorry for the bad title.
I want to make a text in footer that says "info" and when user hover over it it should display a some text and links to "about us", "returns", "size chart" and so on.
It should be exactly like the footer on this website https://www.lazyoaf.com/

so this is how the footer looks before user hover over it


enter image description here

and this is how it looks when user hover over it


enter image description here

This is what i have tried so far

<head>
<style>
.dropbtn {
background-color: #E0D0C3;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #E0D0C3;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #E0D0C3}

.dropdown:hover .dropdown-content {
display: block;
}

.dropdown:hover .dropbtn {
background-color: #E0D0C3;
}
</style>
</head>
<body>


<div class="dropdown">
<button class="dropbtn">Info</button>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>


but this shows the content when hover over bellow the "info" text on the footer
I need it display content above the "info" text and to be wider

Answer Source

I hope this will help you

$(".footerbox").on("mouseenter", function(){
  $(this).find(".popbox").fadeIn("slow")
})


$(".footerbox").on("mouseleave", function(){
  $(this).find(".popbox").fadeOut("slow")
})
.sticky-footer{
   position: fixed;
   bottom: 30px;
   width: 100%;
   }

.contents {
    height: 43px;
    width: 100%;
    position: relative;
}
   
.footerleft {
    float: left;
    width: 50%;
    background-color: grey;
    text-align: right;
}
.footerleft .label{
  padding: 20px;
}

.footerright {
    float: right;
    width: 50%;
    background-color: grey;
}

.footerbox .label{
  color: white;
}


.popbox {
    position: absolute;
    bottom: 43px;
    z-index: 999;
    width: 50%;
    background: #ebebeb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<head>
<style>

</style>
</head>
<body>





<div class="sticky-footer">
    <div class="contents">
      <div class="footerbox footerleft">
        <span class="label">Lazy Oaf</span>
        <div class="popbox" style="display: none;">
          <div class="popbox-inner">
            <h4>Welcome to Lazy Oaf</h4>
          </div>
        </div>
      </div>
      <div class="footerbox footerright">
        <span class="label">Info</span>
        <div class="popbox" style="display: none;">
          <div class="popbox-inner">
          <h4>Info</h4>

           </div>
        </div>
      </div>
    </div><!-- contents -->
</div>









</body>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download