खराब शीर्षक के लिए खेद है। मैं पाद लेख में एक टेक्स्ट बनाना चाहता हूं जो "जानकारी" कहता है और जब उपयोगकर्ता उस पर होवर करता है तो उसे "हमारे बारे में", "रिटर्न", "आकार चार्ट" आदि के लिए कुछ टेक्स्ट और लिंक प्रदर्शित करना चाहिए। यह बिल्कुल इस वेबसाइट के पाद लेख की तरह होना चाहिए 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

मैंने अब तक यही कोशिश की है

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

लेकिन यह सामग्री दिखाता है जब पाद लेख पर "जानकारी" टेक्स्ट को घुमाया जाता है, मुझे इसकी आवश्यकता होती है "जानकारी" टेक्स्ट के ऊपर सामग्री प्रदर्शित करें और व्यापक होने के लिए

-3
R. Bandi 1 अक्टूबर 2017, 09:56
2
ऐसा करने के लिए आपने पहले से ही क्या प्रयास किया है? कृपया मैं एक अच्छा प्रश्न कैसे पूछूं की समीक्षा करें। प्रश्नों में अनुसंधान के साक्ष्य और स्वयं समस्या को हल करने के प्रयास, आपके विशिष्ट कोडिंग-संबंधी मुद्दे की स्पष्ट रूपरेखा और न्यूनतम, पूर्ण और सत्यापन योग्य उदाहरण, ताकि हम मदद कर सकें।
 – 
FluffyKitten
1 अक्टूबर 2017, 09:58
हैलो @FluffyKitten मैंने अपनी पोस्ट संपादित की है। धन्यवाद
 – 
R. Bandi
1 अक्टूबर 2017, 10:05

1 उत्तर

सबसे बढ़िया उत्तर

मुझे आशा है कि इससे आपको मदद मिलेगी

$(".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>
<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>
1
Shiladitya 1 अक्टूबर 2017, 12:59
यहाँ एक छोटी सी समस्या है। इसका चिपचिपा! यह केवल पाद लेख पर नहीं दिखाई देता है, इसलिए जब भी मैं इसे ऊपर या नीचे स्क्रॉल करता हूं तो कृपया यहां छवि देखें imgur .com/a/f4P22 मैं इसे फुटर पर कैसे टिका सकता हूं?
 – 
R. Bandi
1 अक्टूबर 2017, 13:08