1. घर
  2. सवाल और जवाब
  3. चाइल्ड तत्व माता-पिता के बाहर दिखाई दें

चाइल्ड तत्व माता-पिता के बाहर दिखाई दें

2011-09-09 12 views
7

मेरे पास मेरे पृष्ठ पर एक स्लाइडर है जिसमें 200px की ऊंचाई है और इस स्लाइडर के अंदर ओवरफ्लो छिपा हुआ है, वहां सूची आइटम/छवियां हैं जो कि 200px भी हैं। जब आप उपरोक्त टूलटिप दिखाने के लिए छवि आईडी पर होवर करते हैं, तो मेरी एकमात्र समस्या यह है कि ओवरफ्लो नियम के कारण टूलटिप छुपा हुआ है।चाइल्ड तत्व माता-पिता के बाहर दिखाई दें

मैंने सोचा कि आईडी इसे उच्च जेड इंडेक्स देकर टूलटिप दिखाने में सक्षम है लेकिन यह काम नहीं कर रहा है, क्या आप बच्चे के तत्वों को अपने माता-पिता से तोड़ने के लिए प्राप्त कर सकते हैं?

मुझे उम्मीद है कि यह समझ में आता है।

संक्षिप्त मेरी कोड संरचना में

<div class="clip"> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
    <a href="" class="tooltip"><img src="myimage.jpg" style="height:200px;" /><span>tooltip stuff</span></a> 
</div>

सीएसएस नीचे के समान है ...

.clip { 
    height:200px; 
    overflow:hidden; 
    width:400px; 
} 

.tooltip { 
    font-weight:bold; 
    position: relative; 
} 

.tooltip a { 
    font-weight:bold; 
} 

.tooltip span { 
    margin-left: -999em; 
    position: absolute; 
} 

.tooltip:hover span { 
    background: url("../images/backgrounds/black_arrow_big.png") no-repeat scroll 0 0 transparent; 
    font-size: 11px; 
    height: 163px; 
    left: -100px; 
    margin-left: 0; 
    padding: 40px 30px 10px; 
    position: absolute; 
    top: -200px; 
    width: 310px; 
    z-index: 99; 
}

स्रोत

2011-09-09 Liam

उत्तर

4
मेरी जानकारी के अनुसार करने के लिए

आप के नियमों को तोड़ने के लिए एक बच्चे के तत्व नहीं मिल सकता है एक अभिभावक जैसा आपने वर्णन किया है। इसके बजाय, आप इस तरह के document.body के रूप में एक उच्च स्तर घटक को टूलटिप अनुलग्न करना चाहते हैं, और एक छोटे से जावास्क्रिप्ट

<head> 
    <style> 
     #container { 
      position: relative; 
     } 
     #tooltip { 
      position: absolute; 
      display:none; 
      width: 200px; 
      height: 100px; 
      z-index: 99; 
      background-color: gold; 
      top: 0px; 
      left: 0px; 
     } 
     .clip { 
      height: 200px; 
      width: 400px; 
      overflow: hidden; 
      background-color: #C0C0C0; 
      position: absolute; 
      top: 50px; 
      left: 0px; 
     } 
     img { 
      height: 200px; 
      width: 100px; 
      background-color: #222222; 
     } 
    </style> 
</head> 
<script> 
    function imgover(img, tip) { 
     document.getElementById('tooltip').style.display = 'block'; 
     document.getElementById('tooltip').innerHTML = tip; 
     document.getElementById('tooltip').style.left = img.offsetLeft + 'px'; 
    } 

    function imgout() { 
     document.getElementById('tooltip').style.display = 'none'; 
    } 
</script> 
<body> 
<div id="container"> 
    <div id="tooltip">Tooltip Text</div> 
    <div class="clip"> 
     <img onmouseover="imgover(this, 'Tip 1')" onmouseout="imgout()"/> 
     <img onmouseover="imgover(this, 'Tip 2')" onmouseout="imgout()"/> 
     <img onmouseover="imgover(this, 'Tip 3')" onmouseout="imgout()"/> 
    </div> 
</div> 
</body>

स्रोत

2011-09-09 15:14:05

0

साथ अपनी छवि के निरपेक्ष स्थिति के खिलाफ यह स्थिति जब आप एक कंटेनर के लिए position: relative आवेदन कर सकते हैं, यह position: absolute कंटेनर के अंदर बिल्कुल पर स्थित किसी भी बच्चे को बनाता है। तो (0,0) खिड़की के नहीं, कंटेनर का ऊपरी बाएं कोने होगा। आप कंटेनर से position: relative को हटा सकते हैं, लेकिन फिर आपको टूलटिप रखने के लिए सटीक एक्स, वाई स्थिति जाननी होगी।

यदि आप द्रव लेआउट का उपयोग कर रहे हैं, तो आप नहीं जान पाएंगे कि इसे कहां रखा जाए। तो इसके बजाय, आप इसे सापेक्ष स्थिति के साथ छोड़ सकते हैं, और उसके बाद इसे जावास्क्रिप्ट के साथ थोड़ा समायोजित कर सकते हैं। कुछ ऐसा:

var tooltips = document.getElementsByClassName("tooltip"); 
var i; 
for (i = 0; i < tooltips.length; i++) { 
    tooltips[i].style.top = tooltips[i].parentNode.parentNode.style.top - 200; 
    tooltips[i].style.marginLeft = 0; // or display = "block" or whatever to show it 
}

ध्यान दें कि यह कोड अनचाहे है। ध्यान दें कि getElementsByClassName पुराने ब्राउज़र में समर्थित नहीं है, लेकिन यदि आप वेब पर खोज करते हैं तो आप इसका मैन्युअल कार्यान्वयन पा सकते हैं।

स्रोत

2011-09-09 15:59:26 ThatMatthew

1

आप अपने टूलटिप पर fixed पर स्थिति सेट करके यह चाल कर सकते हैं। आपको ऋणात्मक मार्जिन का उपयोग कर अपने माता-पिता के आधार पर अपनी स्थिति निर्धारित करनी होगी।

स्रोत

2014-06-18 06:14:26 micky2be

+0

यह मेरे लिए काम किया। –

संबंधित मुद्दे

 संबंधित मुद्दे