केवल CSS का उपयोग करते हुए, <a> पर होवर पर div दिखाएं

Question

मैं एक div दिखाना चाहूंगा जब कोई किसी <a>तत्व पर होवर करता है, लेकिन मैं ऐसा CSS में करना चाहूंगा ना कि JavaScript में। क्या आप जानते हैं कि यह कैसे हासिल किया जा सकता है?

Comments

div को एक टैग के अंदर होना चाहिए ..

— amosrivera

कृपया देखें stackoverflow.com/questions/3847568/… जब आप पाते हैं कि यह तकनीक 'टूटी हुई' लगती है

— d -_- b

याद रखें कि: होवर टच-स्क्रीन पर उसी तरह से काम नहीं करेगा, और इन दिनों में इसे सावधानी के साथ इस्तेमाल किया जाना चाहिए (जैसे अतिरिक्त नेविगेशन तत्वों को प्रदर्शित करने से बचने के लिए)

— पवेल बुल्वान

क्लिक (से पर सामग्री दिखाने के लिए लक्ष्य सुझाव: "+" CSS चयनकर्ता यहां से सुझाव एक साथ के साथ: "मंडराना" @Pawel Bulwan मैं संयुक्त stackoverflow.com/questions/18849520/... एक समाधान में) है कि दोनों माउस के साथ काम करना चाहिए और स्पर्श - zoomicon.wordpress.com/2017/11/25/…

— जॉर्ज बीरबिलिस

मेरी पिछली टिप्पणी के बाद, उस ब्लॉग पोस्ट पर की गई टिप्पणी के उत्तर में कुछ उपयोगी बदलाव भी देखें: zoomicon.wordpress.com/2017/11/25/…

— जॉर्ज बीरबिलिस

Answer 1

आप की तरह कुछ कर सकते हैं इस :

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

यह आसन्न सिबलिंग चयनकर्ता का उपयोग करता है , और यह सकरफिश ड्रॉपडाउन मेनू का आधार है ।

एचटीएमएल 5 लंगर तत्वों को लगभग कुछ भी लपेटने की अनुमति देता है, इसलिए उस मामले में divतत्व को लंगर का बच्चा बनाया जा सकता है। अन्यथा सिद्धांत समान है - किसी अन्य तत्व :hoverकी displayसंपत्ति को बदलने के लिए छद्म वर्ग का उपयोग करें ।

Comments

अच्छा समाधान, भले ही आप div डालते हैं: hover {डिस्प्ले: ब्लॉक;} तब div hered नहीं होगा जब आप खुद को hover करते हैं ..

— Alper

यह हर <div>पेज पर बना देगा display:noneऔर जब माउस "मेरे ऊपर मंडराना" होगा! यह एक ही माता-पिता <div>के <a>अंदर हर पीछा करेगा display:block। यह .class-nameया उसके द्वारा चयन करने के लिए एक बेहतर विचार हो सकता है #id। नहीं तो अच्छी पोस्ट।

— 22

div जोड़ें: होवर {प्रदर्शन: ब्लॉक; } अपने माउस के ऊपर होने पर इसे बाहर रखने के लिए

— मंकीहाउस

यह प्रदर्शन के बजाय दृश्यता का उपयोग करने के लिए विवेकपूर्ण हो सकता है। जैसा कि मुझे याद है, यह अधिक कुशल है क्योंकि डिस्प्ले हर बार div को redraws करता है। हालाँकि यह शायद एक div के लिए मायने नहीं रखता है, अगर आपको कई काम करने हैं, तो बेहतर होगा कि आप उन्हें इसके बजाय अदृश्य बना दें।

— प्रिन्सिग

@ यि जियांग - आपने इस कोड को उत्तर में कैसे जोड़ा?

— मोहम्मद ज़मीर

Answer 2

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

चूंकि यह उत्तर लोकप्रिय है, मुझे लगता है कि एक छोटे से स्पष्टीकरण की आवश्यकता है। इस विधि का उपयोग करते हुए जब आप आंतरिक तत्व पर मंडराते हैं, तो यह गायब नहीं होता है। क्योंकि .showme अंदर है .showhim यह तब गायब नहीं होगा जब आप अपने माउस को पाठ की दो पंक्तियों (या जो कुछ भी है) के बीच ले जाते हैं।

ये इस तरह के व्यवहार को लागू करते समय आपको ध्यान रखने की आवश्यकता के उदाहरण हैं।

यह सब निर्भर करता है कि आपको इसके लिए क्या चाहिए। यह विधि मेनू शैली के परिदृश्य के लिए बेहतर है, जबकि यी जियांग के टूलटिप्स के लिए बेहतर है।

Comments

जब तक आप HTML 5 का उपयोग नहीं कर रहे हैं, तब तक आपके पास इनलाइन तत्व के अंदर ब्लॉक तत्व नहीं हो सकता है

— मिथाइल

HTML5 इसका मानक नहीं है, इसलिए यी जियांग का तरीका बेहतर है।

— मिथाइल

मुझे पता है कि यह बेहतर है, यही कारण है कि मैंने इसे उखाड़ फेंका :) मैंने एक काम करने का उदाहरण दिया, एक अवधारणा पेश की (सीएसएस चयनकर्ताओं को और अधिक विशेष रूप से), न जाने क्यों इसे डाउनवोट किया गया ^ ^

— n00b

यह <span>एस का उपयोग करने के लिए बेहतर हो सकता है , लेकिन मुझे लगता है कि यह यी जियांग की तुलना में बेहतर उदाहरण है।

— नैट

Answer 3

मैंने पाया कि अस्पष्टता का उपयोग करना बेहतर है, यह आपको एक अच्छा समाप्त होवर प्रभाव बनाने के लिए css3 संक्रमण जोड़ने की अनुमति देता है। संक्रमण केवल पुराने IE ब्राउज़रों द्वारा गिराया जाएगा, इसलिए यह कृपापूर्वक अपमानित करता है।

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

Comments

यह बहुत अच्छा है, मैंने इसे एक बहुत बड़े विभाग के लिए इस्तेमाल किया। मैं अगर मैं "सामान" div करने के लिए "मंडराना" div से मेरी कर्सर ले जाया गया तो मैं पिछले शैली तत्व बदल "सामान" div तक दिखाई दे चाहता था #hover:hover + #stuff {करने के लिए #hover:hover + #stuff, #stuff:hover {। जब आप उस div पर जाते हैं तो "सामान" div दिखाई देता है!

— नॉटजाय

Answer 4

मुझे पता है कि एक विशेषज्ञ का मतलब है, लेकिन मुझे इस कोड के बारे में कुछ काम करने के लिए खुद पर गर्व है। यदि तुम करो:

div {
    display: none;
}

a:hover > div {
    display: block;
} 

('>' पर ध्यान दें) आप एक टैग में पूरी चीज़ को शामिल कर सकते हैं, फिर, जब तक आपका ट्रिगर (जो कि खुद का div हो सकता है, या किसी टैग में सीधे हो सकता है, या आप जो कुछ भी चाहते हैं) शारीरिक रूप से छू रहा है प्रकट div, आप अपने माउस को एक से दूसरे में स्थानांतरित कर सकते हैं।

शायद यह एक महान सौदे के लिए उपयोगी नहीं है, लेकिन मुझे अपनी प्रकट div को अतिप्रवाह करने के लिए सेट करना था: ऑटो, इसलिए कभी-कभी इसमें स्क्रॉल बार होते थे, जो कि div से दूर जाते ही इस्तेमाल नहीं किया जा सकता था।

वास्तव में, आखिरकार वर्क आउट करने के तरीके का पता लगाने के बाद, (हालांकि यह अब ट्रिगर का बच्चा है, भाई-बहन नहीं), z- इंडेक्स के संदर्भ में, ट्रिगर के पीछे बैठें, (इस पेज से थोड़ी मदद से) : बच्चे के ऊपर प्रकट होने के लिए एक मूल तत्व कैसे प्राप्त करें ) आपको इसे स्क्रॉल करने के लिए प्रकट div पर रोल करने की ज़रूरत नहीं है, बस ट्रिगर पर मंडराते रहें और अपने पहिया का उपयोग करें, या जो भी हो।

मेरी प्रकट div पृष्ठ के अधिकांश हिस्से को कवर करती है, इसलिए यह तकनीक माउस के हर कदम के साथ एक राज्य से दूसरे स्क्रीन पर चमकती स्क्रीन के बजाय इसे और अधिक स्थायी बनाती है। यह वास्तव में वास्तव में सहज है, इसलिए मुझे वास्तव में खुद पर काफी गर्व है।

केवल नकारात्मक पक्ष यह है कि आप पूरी चीज़ के भीतर लिंक नहीं डाल सकते हैं, लेकिन आप पूरी चीज़ को एक बड़ी लिंक के रूप में उपयोग कर सकते हैं।

Answer 5

इस उत्तर की आवश्यकता नहीं है कि आप जानते हैं कि किस प्रकार के प्रदर्शन (इनलाइन, आदि) को दिखाने योग्य तत्व को दिखाया जा रहा है:

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

इस का उपयोग करता है आसन्न भाई चयनकर्ता और नहीं चयनकर्ता ।

Answer 6

मैं इस सामान्य उद्देश्य टेम्पलेट समाधान की पेशकश करना चाहूंगा जो यी जियांग द्वारा प्रदान किए गए सही समाधान पर फैलता है।

अतिरिक्त लाभ में शामिल हैं:

• किसी भी तत्व प्रकार, या कई तत्वों पर मंडराने के लिए समर्थन;
• पॉपअप किसी भी तत्व प्रकार या तत्वों का सेट हो सकता है, जिसमें ऑब्जेक्ट भी शामिल हैं;
• स्व-दस्तावेज कोड;
• यह सुनिश्चित करता है कि पॉप-अप अन्य तत्वों पर दिखाई देता है;
• यदि आप एक डेटाबेस से HTML कोड उत्पन्न कर रहे हैं, तो पालन करने के लिए एक ध्वनि आधार।

HTML में आप निम्न संरचना रखते हैं:

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

सीएसएस में आप निम्नलिखित संरचना रखते हैं:

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

नोट करने के लिए कुछ बिंदु हैं:

1. क्योंकि div.popup की स्थिति निर्धारित है (निरपेक्ष के साथ भी काम करेगा) सामग्री दस्तावेज़ के सामान्य प्रवाह के अंदर नहीं है जो दृश्यमान विशेषता को अच्छी तरह से काम करने की अनुमति देती है।
2. z- इंडेक्स यह सुनिश्चित करने के लिए सेट किया गया है कि div.popup अन्य पेज एलिमेंट्स के ऊपर दिखाई दे।
3. Info_popup_container एक छोटे आकार में सेट किया गया है और इस तरह से ओवर नहीं किया जा सकता है।
4. यह कोड केवल div.information एलिमेंट पर होवर करने का समर्थन करता है। Div.information और div.popup दोनों पर होवरिंग का समर्थन करने के लिए फिर नीचे पॉपअप पर होवर देखें।
5. यह परीक्षण किया गया है और ओपेरा 12.16 इंटरनेट एक्सप्लोरर 10.0.9200, फ़ायरफ़ॉक्स 18.0 और Google क्रोम 28.0.15 में अपेक्षित रूप से काम करता है।

पॉपअप पर होवर करें

अतिरिक्त जानकारी के रूप में। जब पॉपअप में ऐसी जानकारी होती है, जिसे आप काटना और चिपकाना चाहते हैं या उसमें कोई ऐसी वस्तु शामिल होती है, जिसे आप उसके साथ इंटर करना चाहते हैं, तो पहले बदलें:

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

साथ में

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

और दूसरा, div.popup की स्थिति को समायोजित करें ताकि div.information के साथ एक ओवरलैप हो। यह सुनिश्चित करने के लिए कुछ पिक्सेल पर्याप्त हैं कि div.popup coveror को div.information से हटाते समय हॉवर प्राप्त कर सकता है।

यह Internet Explorer 10.0.9200 के साथ अपेक्षित रूप से काम नहीं करता है और ओपेरा 12.16, फ़ायरफ़ॉक्स 18.0 और Google Chrome 28.0.15 के साथ अपेक्षित रूप से काम करता है।

एक पॉपअप बहुस्तरीय मेनू के साथ एक पूर्ण उदाहरण के लिए fiddle http://jsfiddle.net/F68Le/ देखें ।

Answer 7

कृपया इस कोड का परीक्षण करें

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>

Answer 8

+केवल पहले नहीं नेस्टेड तत्व 'का चयन करें' अनुमति देते हैं, >का चयन नेस्टेड केवल तत्वों - बेहतर उपयोग करने के लिए है ~जो मनमाना तत्व है जो माता-पिता की संतान है का चयन करने के लिए अनुमति देने के तत्व hovered। अपारदर्शिता / चौड़ाई और संक्रमण का उपयोग करके आप सहज रूप प्रदान कर सकते हैं

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

Answer 9

मेरे लिए, अगर मैं हर बार गायब होने के बिना छिपे हुए div के साथ बातचीत करना चाहता हूं तो मुझे ट्रिगरिंग तत्व (उस मामले में) को छोड़ना होगा: मुझे जोड़ना होगा:

div:hover {
    display: block;
}

Answer 10

मुख्य उत्तर के आधार पर, यह एक उदाहरण है, ?जो किसी लिंक के पास क्लिक करने पर सूचना टूलटिप प्रदर्शित करने के लिए उपयोगी है :

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

Answer 11

इस CSS का उपयोग करके मेरे परीक्षण से:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

और यह HTML:

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

, यह परिणाम है कि यह दूसरे का उपयोग करके विस्तार करता है, लेकिन पहले एक का उपयोग करके विस्तार नहीं करता है। इसलिए अगर होवर टारगेट और छिपे हुए डिव के बीच एक तलाक है, तो यह काम नहीं करेगा।

Answer 12

एचटीएमएल

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

सीएसएस

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

कोडपैन: दूसरे शो में div शो टेक्स्ट पर होवर करें

Answer 13

मत भूलना। यदि आप एक छवि के आसपास मंडराने की कोशिश कर रहे हैं, तो आपको इसे एक कंटेनर के आसपास रखना होगा। सीएसएस:

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

यदि आप इस पर मंडराते हैं:

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

यह दिखाएगा:

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>