将颜色悬停在我的css三角形箭头和容器上

时间:2015-11-24 14:29:42

标签: css

我想在悬停时改变颜色,但它对我不起作用,原因是什么?

气球:

#footer .lv2 > li > a {
*and the triangle arrow:*
#footer .lv2 > li > a:after {


  /** Drop-up menu language flag WPML **/

#footer {
    bottom: 0px;
    display: inline-block;
}


#footer .lv1 > li > a {
     color: black;
     display: block;
     padding-left: 10px;
     padding-right: 10px;
     text-decoration: none;
 }

#footer .lv2 > li > a {
      background-color: rgba(250,250,250,1);
      color: black;
      display: block;
      line-height: 30px;
      margin-bottom: 21.8px;
      border:1px solid rgba(176,176,176,0.7);
      padding-left:  10px;
      padding-right: 10px;
      text-decoration: none;
      border-radius: 5px 5px 5px 5px;
      -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.48);
      -moz-box-shadow: 0px 0px px 0px rgba(0,0,0,0.48);
      box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.48);
 }


    }


    /* triangle arrow */

    #footer .lv2 > li > a:after {
    content: '';
    display: block;
    position: absolute;
    bottom: 27px;
      left: 13px;
    width: 10px;
    height: 10px; 
        background: rgba(250,250,250, 1);
        border-right:1px solid rgba(176,176,176,0.7);
        border-bottom:1px solid rgba(176,176,176,0.7);
     -moz-transform:rotate(45deg);
      -webkit-transform:rotate(45deg);
    }

    /* no separator on last list item */
    #footer .lv1 li:last-child { background: 0; }


    #footer ul {
            list-style-type:        none;
            padding:                0;
    }

    #footer ul.lv1 {
            height:                 100%;
            margin-left:            2.5%;
            margin-right:           2.5%;
            margin-top:             0;
            z-index:                2;
    }

    #footer ul.lv2 {
            display:                none;
            z-index:                3;
    }

    /* fix margin for first drop-up menu */
    #footer li:first-child > ul.lv2 { margin-left: 0px !important; }

    #footer li:hover > ul.lv2 {
                bottom:                 26px;
                display:                block;
                position:               absolute;
                padding-bottom:         10px;

                /* align drop-up edge with separator line */
                margin-left:            -1px;

    }

2 个答案:

答案 0 :(得分:0)

通常,当某些东西悬停在你身上时,你可以使用Pseudo类#footer:hover { background-color: tomato; } ,如下所示:

footer

当具有>>> i.active() [{'worker1.example.com': [{'name': 'tasks.sleeptask', 'id': '32666e9b-809c-41fa-8e93-5ae0c80afbbf', 'args': '(8,)', 'kwargs': '{}'}]}] ID的元素悬停在其上时,这将更改背景颜色。

答案 1 :(得分:0)

我发现了如何为这些课程着色,但我只是让一个人上班,而不是两个人一起......

我试过了:

return price

#footer .lv2 > li > a:hover:after, .lv2 > li > a:hover {
    background-color: tomato;
    }

#footer .lv2 > li > a:hover:after, #footer .lv2 > li > a:hover {
    background-color: tomato;
    }

让其发挥作用的任何其他建议?