गठबंधन: के बाद के साथ: मंडराना

Question

मैं CSS (या किसी अन्य छद्म चयनकर्ता) के :afterसाथ संयोजन करना चाहता हूं :hover। मेरे पास मूल रूप से एक सूची है और selectedवर्ग के साथ आइटम का उपयोग करके लागू एक तीर का आकार है :after। मैं चाहता हूं कि जो वस्तुएं मँडरा रही हैं, उनके लिए भी यही सही हो, लेकिन यह काम करने के लिए पर्याप्त नहीं है। कोड का उपयोग करता है

#alertlist
{
    list-style:none;
    width: 250px;
}
#alertlist li
{
    padding: 5px 10px;
    border-bottom: 1px solid #e9e9e9;
    position:relative;
}
#alertlist li.selected, #alertlist li:hover
{
    color: #f0f0f0;
    background-color: #303030;
}

#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

<ul id="alertlist">
    <li>Alert 123</li>
    <li class="selected">Alert 123</li>
    <li>Alert 123</li>
</ul>

Comments

क्या आपने नियम #alertlist li: hover: after जोड़ने का प्रयास किया है?

— एंड्रिया

Answer 1

बस :afterअपने #alertlist li:hoverचयनकर्ता को उसी तरह से जोड़ें जिस तरह आप अपने #alertlist li.selectedचयनकर्ता के साथ करते हैं :

#alertlist li.selected:after, #alertlist li:hover:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}

Comments

@ क्रिस, जो आपने शायद पहले कोशिश की थी, उसके :after:hover विपरीत था :hover:after। यह वही है जो मैंने शुरू में किया था जो निराशाजनक रूप से काम नहीं करता है

— WickyNilliams

@WickyNilliams: डिजाइन द्वारा की (बनाम छद्म कक्षाएं छद्म तत्वों) यही कारण है कि - देख stackoverflow.com/questions/5777210/...

— BoltClock

यह क्रोम (v43) में पाठ-सजावट के लिए काम नहीं करता है और न ही एफएफ (v38) में।

— भूवैज्ञानिक

@geoidesic: पाठ सजावट पूरी तरह से एक अलग मुद्दा है। वे विशेष रूप से पूर्ण स्थिति के साथ अच्छा नहीं खेलते हैं। छद्म तत्वों या :hoverछद्म वर्ग के साथ कुछ नहीं करना है ।

— BoltClock

@BoltClock मैं पूर्ण स्थिति का उपयोग नहीं कर रहा हूं, लेकिन जब मैं अपना रंग बदल सकता हूं: उपरोक्त चयनकर्ता सिंटैक्स का उपयोग कर सामग्री के बाद, मैं होवर स्थिति के लिए पाठ-सजावट को बदलने में सक्षम नहीं हूं: लिंक पर तत्व के बाद । अन्यथा टेक्स्ट-डेकोरेशन ठीक काम करता है।

— भूवैज्ञानिक

Answer 2

scss में

&::after{
content: url(images/RelativeProjectsArr.png);
margin-left:30px;
}

&:hover{
    background-color:$turkiz;
    color:#e5e7ef;

    &::after{
    content: url(images/RelativeProjectsArrHover.png);
    }
}

Answer 3

 #alertlist li:hover:after,#alertlist li.selected:after
{
    position:absolute;
    top: 0;
    right:-10px;
    bottom:0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #303030;
    content: "";
}​

jsFiddle लिंक

Comments

li: hover: afte इसे उसी वर्ग में जोड़ें जैसा कि चयनित है

— किशोर कुमार