जब एक सीएसएस सूची आइटम मँडरा, माता पिता आइटम सीएसएस

बदल मैं एक साधारण यूएल सूची है, जब आप नीचे HTML में More सूची आइटम पर होवर करें, यह unhides यह बच्चे मेनू है और यह दिखाता है।जब एक सीएसएस सूची आइटम मँडरा, माता पिता आइटम सीएसएस

मैं क्या करने की जरूरत वास्तविक More के सीएसएस के सीएसएस बदल एक बार बच्चे मेनू शो है और hovered है।

तो अगर आप More पर ले जाएं, एक बच्चे मेनू दिखाई देने लगता है, तो आप उस बच्चे मेनू पर होवर करें। इस बिंदु पर मुझे इस बच्चे के मेनू के अभिभावक के सीएसएस को बदलने की जरूरत है जो मेनू होगा जिसमें More है क्योंकि यह टेक्स्ट है।

आप कैसे जावास्क्रिप्ट के बिना यह करने के लिए पता है, मुझे पता है .. शायद यह भी नहीं जे एस के बिना संभव है प्यार होता है?

<div id="nav-wrapper"> 
     <ul> 

      <li><a href="">Link</a></li> 

      <li><a href="">Link 5</a></li> 

      <li><a href="">More</a> 
       <ul> 
        <li><a href="">Sub Link 1</a></li> 
        <li><a href="">Sub Link 2</a></li> 
        <li><a href="">Sub Link 3</a></li> 
        <li><a href="">Sub Link 4</a></li> 
        <li><a href="">Sub Link 5</a></li> 
       </ul> 
      </li> 

     </ul> 
    </div>

सीएसएस

<style type="text/css" media="screen"> 
#nav-wrapper ul { 
    position:relative; 
    width: 700px; 
    float: right; 
    margin: 0; 
    list-style-type: none; 
} 
#nav-wrapper ul li { 
    vertical-align: middle; 
    display: inline; 
    margin: 0; 
    color: black; 
    list-style-type: none; 
} 
#nav-wrapper ul li a { 
    text-decoration: none; 
    white-space: nowrap; 
    line-height: 45px; 
    font-size: 13px; 
    color: #666; 
    padding: 5px 15px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px; 
} 
#nav-wrapper ul li a:hover { 
    color: #fff; 
    background-color: #4caef2; 
} 
#nav-wrapper ul li a:visited { 
    color: #666; 
} 

/* Hide Sub-menus */ 
#nav-wrapper ul ul{ 
    display: none; 
} 
/* SHOW Sub-menus on HOVER */ 
#nav-wrapper ul li:hover ul{ 
    display: block; 
    margin:-10px 0 0 0; 
    padding:0px 20px 20px 20px; 
    border-color:#fff; 
    border:1px; 
    border-style:solid; 
    background:#FFF; 
    position:absolute; 

    top:45px; 
    right: 320px; 
    width: 420px; 
} 

</style>

स्रोत

2011-12-24 CodeDevelopr

ठीक है, इन अन्य उत्तरों के बावजूद, adjacent selector का उपयोग करके इसके बारे में जाने का एक बेवकूफ तरीका है।

HTML:

<ul> 
    <li> 
     <ul> 
      <li>Sub Link 1</li> 
      <li>Sub Link 2</li> 
      <li>Sub Link 3</li> 
     </ul> 
     <a href="#">Menu</a> 
    </li> 
</ul>

सीएसएस:

* { 
    margin: 0; 
    padding: 0; } 
ul { list-style: none; } 
ul > li { position: relative; } 
ul li a { 
    height: 16px; 
    display: block; } 
ul ul { 
    position: absolute; 
    top: 16px; 
    left: 0; 
    cursor: pointer; 
    display: none; } 
ul li:hover ul { display: block; } 
ul ul:hover + a { color: red; }

पूर्वावलोकन: http://jsfiddle.net/Wexcode/YZtgL/

स्रोत

2011-12-24 04:26:36 Wex

वाह जो बहुत बढ़िया है! – CodeDevelopr

आप सीएसएस में माता पिता के तत्व नहीं चुन सकते। आप जो चाहते हैं उसे पूरा करने के लिए आपको जावास्क्रिप्ट/jQuery की आवश्यकता होगी।

CSS3 selectors...

स्रोत

2011-12-24 04:16:20 Scott

नीचे वोट क्यों? यह 100% सही है। – Scott

यह एक तत्व सीएसएस का उपयोग कर के माता-पिता को चुनने के लिए संभव नहीं है। आपको इसे कार्यान्वित करने के लिए jQuery जैसे जावास्क्रिप्ट या जावास्क्रिप्ट पुस्तकालयों का उपयोग करना होगा।

यह आपकी मदद कर सकता है। Complex CSS selector for parent of active child

स्रोत

2011-12-24 04:20:25 Virendra

पुराना सवाल है, और स्वीकार किए जाते हैं जवाब चालाक है। लेकिन यह बहुत प्राप्त करने के लिए मामूली बात है, से अपने सीएसएस में सिर्फ एक परिवर्तन के साथ:

#nav-wrapper ul li a:hover

रहे हैं:

#nav-wrapper ul li:hover>a

यह IE6 में काम नहीं करेगा (है कि ब्राउज़र केवल एंकर पर शैलियों मंडराना समझता है)। लेकिन तब न ही आसन्न भाई संयोजक चयनकर्ता (+) करता है।

कार्रवाई

स्रोत

2013-08-07 12:11:18 CherryFlavourPez

यह बच्चे तत्व को बदलता है, न कि पैरेंट तत्व –

@ जोएलैनन - हाँ, और यह वही प्राप्त करता है जो ओपी ने पूछा था। माता-पिता चयनकर्ता जैसी कोई चीज़ नहीं है, लेकिन सीएसएस होवर शैलियों को पैरेंट 'ली' में ले जाकर आपको इसकी आवश्यकता नहीं है। – CherryFlavourPez

मुझे पता है कि कोई अभिभावक चयनकर्ता नहीं है, सवाल माता-पिता के सीएसएस को बदलने के लिए कहा गया है। मैं देखता हूं कि अब आप अपने समाधान के साथ कहां जा रहे हैं। चीयर्स –

काम करता है ऊपर @CherryFlavourPez के समाधान में सुधार के लिए this jsFiddle देखें। यह क्यों काम करता है स्पष्ट रूप से समझाया नहीं गया है। ध्यान दें कि ली तत्व ("अधिक" पाठ के साथ एक) सबमेनू के माता पिता (पांच ली उस में तत्वों के साथ उल) है। एक तत्व एक (समीप) सबमेनू के भाई है।तो जब आप उपमेनू पर होवर कर रहे हैं तो आप वास्तव में अभी भी माता-पिता li तत्व पर भी होवर कर रहे हैं।

स्रोत

2017-11-12 21:31:51 leoncc

यह अभी भी संभव नहीं है हालांकि बच्चे से माता-पिता के सीएसएस को बदलने के लिए केवल सीएसएस का उपयोग करना संभव नहीं है। – leoncc

जब एक सीएसएस सूची आइटम मँडरा, माता पिता आइटम सीएसएस

उत्तर

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