CSS Sprites - Как оставить кнопку Hover в нажатом состоянии

CSS Sprites (кнопка) с тремя разными состояниями:

  1. Стандарт
  2. Наведите курсор
  3. Нажато (активно)

В настоящее время работают «Стандарт», «Наведение» и «Нажатие». Проблема в том, что «Нажато» остается нажатым только при удерживании мыши. Я хотел бы, чтобы состояние «Нажато» или активное оставалось активным до тех пор, пока оно не будет нажато снова. Любые идеи? CSS-решение? JavaScript-решение?

Спасибо за помощь, Д

Вот код:

<html>

<style type="text/css">

    a.button {
        background-image: url('BUTTON SPRITES IMAGE');
        width: 86px;
        height: 130px;
        display: block;
        text-indent: -9999px;

    }

    a.micbutton:hover { 
        background-position: 0 -130px;

    }

    a.micbutton:active { 
        background-position: 0 -260px; 

    }

</style>

<a class="button" href="#" ></a>

</html>

javascript html css sprite css-sprites
person David J. Phillips    schedule 25.07.2011    source источник
comment
Оставить :hover или :active включенными после выхода из элемента или отпускания кнопки мыши невозможно только с помощью CSS. Вам нужно будет добавить событие щелчка JavaScript, чтобы сохранить стиль active и обработать второй щелчок, чтобы отключить его снова.   -  person andyb    schedule 26.07.2011

Ответы (3)


arrow_upward
2
arrow_downward

добавить активный класс:

a.button {
    background-image: url('BUTTON SPRITES IMAGE');
    width: 86px;
    height: 130px;
    display: block;
    text-indent: -9999px;

}

a.button:hover { 
    background-position: 0 -130px;
}

a.button:active, a.active { 
    background-position: 0 -260px; 
}

Затем, когда ваша кнопка активна, просто добавьте класс:

<a class="button active" href="#" ></a>
person AlienWebguy    schedule 25.07.2011

arrow_upward
2
arrow_downward

Добавить активный класс было правильно. Использование функции toggleClass при щелчке добавляет активный класс и удаляет класс при втором щелчке. Вот кем ты был после того, как я верю.

Скрипка

$(function() {
    $('.button').click(function() {
        $(this).toggleClass('active');
    });    
});
person Matt Ginn    schedule 25.07.2011
comment
+1 за правильное решение и то, что я собирался написать :-) - person andyb; 26.07.2011

arrow_upward
1
arrow_downward

Спасибо всем за вашу помощь - невероятно здорово. В итоге получается комбинация новых классов CSS и javascript. Этот новый код допускает 3 упомянутых выше состояния (Нормальное, Наведение, Нажатие). При повторном нажатии на состояние «Нажато» кнопка (спрайты) возвращается в свое обычное состояние.

Вот окончательный код:

<html>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
   $('.button').click(function() {
    $(this).toggleClass('button').toggleClass('button1').toggleClass('active');
});   
});

</script>   

<style type="text/css">

a.button {
    background-image: url('BUTTON SPRITES IMAGE');
    width: 86px;
    height: 130px;
    display: block;
    text-indent: -9999px;

}

a.button:hover { 
    background-position: 0 -130px;

}

a.button:active, a.active { 
    background-position: 0 -260px; 

}

a.button1:active { 
background-position: 0 -260px; 

}

</style>

<a class="button" href="#" ></a>

</html>
person David J. Phillips    schedule 26.07.2011