CSS Hover падзеі, як выклікаць эфект з бацькоў

I have a dropdown menu

which displays a second list when hovered on.

такім чынам:


When you hover on the "News & Press Releases" anchor tag, the following effect takes place:

#NavBar > li > a:hover {
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    color: #000;
}

Тым не менш, другой вы пераязджае ў любой з даччыных спасылак, такія як «OCPO Home», эфект вышэй лунання знікае. Відавочна, што я павінен быў бы прымусіць яго застацца, выкарыстоўваючы іншы CSS тэг, але я не ведаю, што я раблю няправільна. Гэта мая спроба:

.NavBar_drop:hover #NavBar > li > a {
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;
    background: #F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
    color: #000;
}
3
Пры пераходзе да дзіцяці спасылкі вы крананні на ; такім чынам лунання эфект прыпынку. Паспрабуйце змяніць селектар так, што ён спрацоўвае пры навядзенні на аднаго з бацькоў
  • замест: #NavBar> Ці: пры навядзенні курсора {Стылі CSS тут ...}
  • дададзена аўтар Dre, крыніца
    Калі ласка; Я зраблю гэта адказ замест таго, каб такім чынам, што яна можа быць зачынена.
    дададзена аўтар Dre, крыніца
    Гэта будзе зрабіць гэта! Дзякуй. Я думаў, што гэта будзе ісці праз якар тэг, а не пункт спісу, але цяпер гэта мае сэнс.
    дададзена аўтар Karmaxdw, крыніца
    Гэта будзе зрабіць гэта! Дзякуй. Я думаў, што гэта будзе ісці праз якар тэг, а не пункт спісу, але цяпер гэта мае сэнс.
    дададзена аўтар Karmaxdw, крыніца

    6 адказы

    Technically you can't trigger an effect on a parent element. However, you don't actually need to do that given the problem you've stated. When you move to the child links you are moving OFF the ; hence the hover effect stopping. Change the selector so that it's triggered when you hover on the parent

  • instead:
    #NavBar > li:hover { 
        /* CSS Styles here... */
    }
    
  • 2
    дададзена

    Technically you can't trigger an effect on a parent element. However, you don't actually need to do that given the problem you've stated. When you move to the child links you are moving OFF the ; hence the hover effect stopping. Change the selector so that it's triggered when you hover on the parent

  • instead:
    #NavBar > li:hover { 
        /* CSS Styles here... */
    }
    
  • 2
    дададзена

    Alternatively to Dre's answer, if you just want to highlight your when over the entire

  • , try using this CSS rule instead:
    #NavBar > li:hover > a {
    

    See working demo

  • 1
    дададзена

    Alternatively to Dre's answer, if you just want to highlight your when over the entire

  • , try using this CSS rule instead:
    #NavBar > li:hover > a {
    

    See working demo

  • 1
    дададзена

    Вы не можаце выбраць бацькоўскі элемент у каскадных табліцах стыляў, так што вы спрабуеце не ўяўляецца магчымым

    0
    дададзена
    Там можа быць нешта не так з тым, як я збіраюся пра гэта, але гэта, вядома, не немагчыма.
    дададзена аўтар Karmaxdw, крыніца

    Вы не можаце выбраць бацькоўскі элемент у каскадных табліцах стыляў, так што вы спрабуеце не ўяўляецца магчымым

    0
    дададзена
    Там можа быць нешта не так з тым, як я збіраюся пра гэта, але гэта, вядома, не немагчыма.
    дададзена аўтар Karmaxdw, крыніца