CSS Sprites - Как оставить кнопку наведения в нажатом состоянии - PullRequest
Новая
       23

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

7 голосов
/ 26 июля 2011

CSS-спрайтов (кнопка) с тремя различными состояниями:

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

В настоящее времяРабота «Стандарт», «Наведение» и «Прессование».Проблема в том, что «нажата» остается нажатой только при удерживании мыши.Мне бы хотелось, чтобы состояние «Нажатие» или «Активно» оставалось активным до тех пор, пока оно не будет снова щелкнуто.Есть идеи?Решение CSS?Решение javascript?

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

Вот код: 

<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>

Ответы [ 3 ]

2 голосов
/ 26 июля 2011

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

Fiddle 

$(function() {
    $('.button').click(function() {
        $(this).toggleClass('active');
    });    
});
2 голосов
/ 26 июля 2011

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

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>
1 голос
/ 26 июля 2011

Спасибо всем за помощь - потрясающе. В конечном итоге это комбинация новых классов 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>
...