1. घर
  2. सवाल और जवाब
  3. सीएसएस :: पहले :: वर्ग के छद्म-तत्व के बाद

सीएसएस :: पहले :: वर्ग के छद्म-तत्व के बाद

2014-06-18 12 views
11

काम करने के बाद मैं एक मेनू शीर्षक में ::before और ::after छद्म-तत्व जोड़ने की कोशिश कर रहा हूं। छद्म तत्व मेनू के बाहर एक नियमित लिंक के लिए ठीक काम करते हैं। हालांकि, जब मैं उन्हें एक मेनू आइटम के लिए लागू करने के लिए कोशिश कर रहा हूँ, background संपत्ति सेट है, लेकिन ::before और ::after गुण नहीं हैं।सीएसएस :: पहले :: वर्ग के छद्म-तत्व के बाद

#cssmenu { 
    background-color: #FFFFCC; 
    clear: both; 
    display: inline; 
    float: left; 
    list-style: none; 
    overflow: hidden; 
    text-align: center; 
    text-transform: uppercase; 
    width: 100%; 
} 
#cssmenu li { 
    display: inline-block; 
} 
#cssmenu li a { 
    display: inline-block; 
} 
#cssmenu li ul { 
    /*margin-top: 0px; submenu location relative to bottom of parent */ 
    display: none; 
} 
#cssmenu li:hover ul { 
    display: block; 
    position: absolute; 
} 
#cssmenu li ul li a { 
    width: 200px; 
} 
#cssmenu li:hover > a { 
    /* shadow around parent when hover */ 
    box-shadow: 5px 5px 25px #000; 
    -moz-box-shadow: 5px 5px 25px #000; 
    -webkit-box-shadow: 5px 5px 25px #000; 
} 
#cssmenu li a { 
    color: #000; 
    font-weight: bold; 
    text-decoration: none; 
    padding: 0 12px; 
    line-height: 24px; 
} 
#cssmenu li a:hover { 
    background-color: #99CC99; 
    /*padding: 12px; link background when hover over link */ 
} 
#cssmenu li ul { 
    background: rgba(255,255,255,0.9); child menu background w/ transparency 
    padding: 10px 5px; 

    box-shadow: 5px 5px 25px #BBB; 
    -moz-box-shadow: 5px 5px 25px #BBB; 
    -webkit-box-shadow: 5px 5px 25px #BBB; 

    border-radius: 0px 15px 15px 15px; 
    -moz-border-radius: 0px 15px 15px 15px; 
    -webkit-border-radius: 0px 5px 5px 5px; 
} 
/* display sub-menu as list */ 
#cssmenu li ul li { 
    display: block; 
    text-align: left; 
} 
#cssmenu li ul li a, #nav li ul li a:hover { 
    background: transparent; 
    color: #000; 
    width: 180px; 
    font-size: 0.95em; 
    font-weight: normal; 
    padding: 6px; 
} 
#cssmenu li ul li a:hover { 
    /*text-decoration: underline;*/ 
    box-shadow: none; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    border-radius: 0; 
    -moz-border-radius: 0; 
    -webkit-border-radius: 0; 
} 
.menuheader { 
    /* allow for the pseudo-elements which do not have layout due to absolute positioning */ 
    margin: 12px 15px; 
    border: 0; 
    background: url("../../../images/buttonslice24.png") 24px 0 repeat-x ; 
} 
.menuheader::before, 
.menuheader::after { 
    content: ' '; 
    position: absolute; 
    top: 0; 
    width: 12px; 
    height: 24px; 
} 
.menuheader::before { 
    left: -12px; 
    background: url("../../../images/buttonleft24.png") 0 0; 
    no-repeat; 
} 
.menuheader::after { 
    right: -12px; 
    background: url("../../../images/buttonright24.png") 100% 0; 
    no-repeat; 
}

और प्रासंगिक एचटीएमएल:

यहाँ प्रासंगिक सीएसएस है

<div id="cssmenu"> 
    <ul> 
    <li><a class="menuheader" href="../../../contact-us.aspx">Contact</a></li> 
    <li><a class="menuheader" href="../../../">Home</a></li> 
    <li><a class="menuheader">Store</a> 
     <ul> 
     <li><a href="../../../shipping-policy.aspx">Shipping &amp; Return Policy</a></li> 
     </ul> 
    </li> 
    <li><a class="menuheader" href="../../../account.aspx">Account</a></li> 
    <li><a class="menuheader" href="../../../cart.aspx">View Cart</a></li> 
    </ul> 
</div>

JSFiddle

मैं भी बजाय #cssmenu ul li a द्वारा menuheader वर्ग आइटम को संदर्भित करने की कोशिश की है, और कहा कि वास्तव में काम करता है (तरह)। इसके बजाय मेनू आइटम खुद के बगल में दिखा ::before और ::after छवियों की, वे ड्रॉप-डाउन मेनू में पहला आइटम के बगल में दिखाया।

मैं यहाँ के बारे में छद्म तत्वों, साथ ही http://www.w3schools.com/css/css_pseudo_elements.asp पर अन्य प्रश्न पढ़ लिया है और जहाँ तक मैं बता सकता हूँ, ::before और ::after एक <a> तत्व को लागू किया जा करने के लिए सक्षम होना चाहिए। यह कुछ आसान मुद्दा हो सकता है, लेकिन मैं यहां इस मुद्दे को नहीं देख रहा हूं।

स्रोत

2014-06-18 dub stylee

+1

:

.menuheader { position : relative; }

यहाँ अपने JSFiddle के एक अद्यतन संस्करण (केवल परिवर्तन ऊपर कोड को जोड़ने और छद्म तत्वों की पृष्ठभूमि प्रदर्शन के लिए एक ठोस रंग बना रहे हैं) है @Noah Wetjen: आप सवाल JSFiddle लिंक जोड़ सकते हैं, लेकिन सवाल से कोड निकाल नहीं करते कृपया, वहाँ इसके बारे में एक बहुत कुछ है, भले ही। कोड के साथ एक प्रश्न लेकिन कोई बेवकूफ लिंक केवल एक बेवकूफ लिंक और कोई कोड के साथ एक प्रश्न से कहीं बेहतर है। – BoltClock

उत्तर

17

आप पूरी तरह छद्म तत्वों की स्थिति के लिए जा रहे हैं, तो आप अपने माता पिता के एक position मान, गैर-छद्म तत्वों के साथ के रूप में ही देनी होगी।

बस जोड़ें: http://jsfiddle.net/99Aq8/1/

स्रोत

2014-06-18 22:16:31 Jasper

+0

यह पूरी तरह से काम किया। मुझे लगा कि यह ऐसा कुछ नाबालिग होगा, लेकिन मेरा सिर दीवार के खिलाफ इसे टक्कर मारने से परेशान हो रहा था। धन्यवाद! –

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

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