При нажатии на указатель он полностью не меняет цвет

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем Ridarija, 16 май 2014.

Статус темы:
Закрыта.
  1. Ridarija

    Ridarija

    Регистрация:
    26 июл 2013
    Сообщения:
    1
    Симпатии:
    0
    Такой вопрос:
    Пытаюсь при нажатии на указатель (стрелку) заменить белый цвет на черный при помощи hover. Заменяется цвет основного блока, сам треугольник не закрашивается в черный цвет. При этом если просто меняешь цвет треугольника без hover, то меняется, с hover - нет. Мне нужно именно при нажатии на указатель,чтобы он полностью менял цвет , а не только его часть. Как это можно реализовать?

    Вот код:
    HTML:
    .arrow_box {
        position: absolute;
        background: #ffffff;
        border: 1px solid #e5e5e5;
        height: 10px;
        width: 178px;
        padding: 7px;
        border-radius: 5px;
        margin-top: 20px;
        margin-left: 52px;
      
             }
    
    .arrow_box:after, .arrow_box:before {
       left: 99%;
       top: 50%;
       border: solid transparent;
       content: " ";
       height: 0;
       width: 0;
       position: absolute;
       pointer-events: none;
        }
    .arrow_box:after {
        border-left-color: #fff;
        border-width: 12px;
        margin-top: -12px;
        }
      
      
      
    .arrow_box:before {
       border-left-color: #e5e5e5;
       border-width: 13px;
       margin-top: -13px;
        }
      
      
      .arrow_box p{
        color: #E0890C;
        font-family: Myriad Pro;
        font-size: 14px;
        margin-top: -4px;
        width: 178px;
        }
      
        .arrow_box:hover{
        background-color:#000;
        border:1px solid;
        }
        .arrow_box:after:hover{
        border-left-color:#000;
        }
    HTML:
    HTML:
    <div class="arrow_box"></div>
     
    Lasted edited by : 16 май 2014
  2. kama812

    kama812

    Регистрация:
    30 мар 2013
    Сообщения:
    311
    Симпатии:
    194
    поменяй
    .arrow_box:after:hover{
    на
    .arrow_box:hover:after{
     
    Ridarija нравится это.
Статус темы:
Закрыта.