का उपयोग करके किसी अन्य तत्व की स्थिति के आधार पर एक तत्व को स्थिति दें, मैंने केवल सहायता सीएसएस का उपयोग करके पॉपअप विंडो की तरह दिखने वाले सहायता टेक्स्ट को प्रदर्शित करने का एक आसान तरीका बनाया है। यह डिफ़ॉल्ट रूप से छोड़कर अच्छा काम करता है पॉपअप विंडो को उचित छोड़ दिया जाता है। मैं खिड़की को आइकन के करीब होना चाहूंगा (मेरे उदाहरण में) "बाएं: 360 पीएक्स;" दिखाएगा चूंकि होवर आइकन की स्थिति बदल सकती है, क्या किसी को आइकन पर आच्छादित स्थिति की स्थिति के आधार पर पॉपअप विंडो की स्थिति सेट करने का तरीका पता है? हम jQuery और प्रोटोटाइप का उपयोग करते हैं, लेकिन मैं केवल सीएसएस का उपयोग करना पसंद करूंगा ताकि उसी कोड को किसी भी प्रकार के पेज पर इस्तेमाल किया जा सके। धन्यवाद।केवल एक सीएसएस
संपादित करें:
यहाँ मेरी उदाहरण है यह पहले से ही उत्तर दिया गया था, लेकिन यहाँ जब एक आइकन पर मँडरा एक पॉपअप संदेश प्रदर्शित करने के लिए एक आसान तरीका की तलाश में है और कुछ मामले किसी में निश्चित कोड है। इसके अलावा, यहां jsfiddle.net पर इसका एक उदाहरण दिया गया है ताकि आप आसानी से इसे आज़मा सकें: http://jsfiddle.net/zDADW/
वैसे, अगर कोई जानता है कि कोई इसे नीचे क्यों रैंक करेगा (इस लेखन के रूप में किसी ने इसके लिए नीचे तीर पर क्लिक किया है प्रश्न), कृपया मुझे बताएं।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Show help text when hovering using CSS</title>
<style type="text/css">
#help:hover #help_popup {
/*If you hover over the help icon, show the help_popup span*/
display: block;
}
#help {
/*This is the part I was missing*/
position: relative;
}
#help_popup {
/*Normally, hide this span*/
display: none;
position: absolute;
width: 15em;
padding: 10px;
background: #CFF;
color: #000;
border: 3px solid;
text-align: center;
left: 10px; /*this is still needed even if it's 0*/
}
</style>
</head>
<body>
<div>
This shows a popup window using CSS when you mouse over an image.
<div>
Hover over the question mark for a popup help window.
<span id="help">
<img src="questionmark.png" alt="[?]"/>
<span id="help_popup">
This is the normally hidden help text.
<br/>It only shows up when you hover over the question mark.
</span>
</span>
</div>
</div>
</body>
</html>
धन्यवाद! यह एक चैंप की तरह काम करता है! – rrtx2000
मैं आपको वोट दूंगा लेकिन मेरे पास प्रतिष्ठा नहीं है। – rrtx2000
धन्यवाद :-) यह सब अच्छा है। – thirdender