একত্রিত: পরে: হোভার

Question

আমি সিএসএসে (বা অন্য কোনও ছদ্ম নির্বাচক) এর :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 লি: হোভার: পরে নিয়মটি যুক্ত করার চেষ্টা করেছেন?

— Andrea

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: নকশা দ্বারা এর (বনাম সিউডো-শ্রেণীর সিউডো-উপাদানের) সেই - দেখুন stackoverflow.com/questions/5777210/...

— BoltClock

এটি Chrome (v43) বা এফএফ (v38) তে পাঠ্য-সজ্জা জন্য কাজ করে বলে মনে হচ্ছে না।

— জিওএডসিক

@ জিওয়েডেসিক: পাঠ্য সজ্জা পুরোপুরি একটি আলাদা সমস্যা। তারা বিশেষত নিখুঁত অবস্থানের সাথে ভাল খেলেন না। ছদ্ম-উপাদান বা :hoverছদ্ম-শ্রেণীর সাথে কিছুই করার নেই ।

— 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: "";
}​

jsFizz লিংক

Comments

লি: হোভার: এটিকে নির্বাচিত হিসাবে একই শ্রেণিতে যোগ করুন

— কিশোর কুমার