CSS a: активное переопределение аналогично iPhone TouchUpInside - PullRequest
Новая
       1

CSS a: активное переопределение аналогично iPhone TouchUpInside

1 голос
/ 04 февраля 2011

В данный момент я работаю над сайтом и впервые зашел в CSS Sprites. В состоянии a: active я смещаю фоновую позицию по мере необходимости, которая отлично работает. Тем не менее, если я нажму на ссылку и переместу свою мышь от ссылки, все еще в середине щелчка. Эффект остается на кнопке, даже после того, как я отпущу щелчок!

Существует ли правило CSS, аналогичное действию iPhone "TouchUpInside", поэтому оно действует только в том случае, если пользователь отпускает щелчок, находясь в области ссылок?

Ответы [ 3 ]

0 голосов
/ 04 февраля 2011

Вам, вероятно, лучше использовать .myButton:hover, а не активно.Как и при отключении мыши и отпускании кнопки, состояние наведения больше не будет применяться:

0 голосов
/ 04 февраля 2011

Попробуйте применить к этим ссылкам jQuery .mouseout (). 

$(".myLinks").mouseout(function() {
  $(this).css('background-position','0 0'); // original position of your sprite
});

Перетаскивание ссылки в середине щелчка (когда мышь «нажата») - это не то, что CSS способен обработать.CSS потребовал бы дополнительный псевдокласс, такой как «a: unactive», чтобы тот же эффект имел место.

0 голосов
/ 04 февраля 2011

Не знаю, ищите ли вы это, но, глядя в меню моего сайта, параметр a:active сохраняет его включенным, когда вы находитесь на этой странице, если вы хотите, чтобы он изменился, когда кто-то наводит курсор на него, используйте a:hover

попробуйте что-то вроде этого 

ul.cssmenu li a {
    display: block;
    width: 150px;
    height: 50px;
    background:url(images/bg%27s/menu.png);
    }

/*
*   Normal Links
*/
ul.cssmenu li.home a {
    background-position: 0 -3px;
    }

ul.cssmenu li.photos a {
    background-position: -150px -3px;
    }

ul.cssmenu li.racing a {
    background-position: -300px -3px;
    }
    ul.cssmenu li.blog a {
    background-position: -450px -3px;
    }

ul.cssmenu li.forum a {
    background-position: -600px -3px;
    }

ul.cssmenu li.contact a {
    background-position: -750px -3px;
    }

/*
*   Hover Links
*/
ul.cssmenu li.home a:hover {
    background-position: 0 -54px;
    }

ul.cssmenu li.photos a:hover {
    background-position: -150px -54px;
    }

ul.cssmenu li.racing a:hover {
    background-position: -300px -54px;
    }
ul.cssmenu li.blog a:hover {
    background-position: -450px -54px;
    }

ul.cssmenu li.forum a:hover {
    background-position: -600px -54px;
    }

ul.cssmenu li.contact a:hover {
    background-position: -750px -54px;
    }

/*
*   Clicked Links
*/
ul.cssmenu li.home a:active {
    background-position: 0 -54px;
    }

ul.cssmenu li.photos a:active {
    background-position: -150px -54px;
    }

ul.cssmenu li.racing a:active {
    background-position: -300px -54px;
    }
ul.cssmenu li.blog a:active {
    background-position: -450px -54px;
    }

ul.cssmenu li.forum a:active {
    background-position: -600px -54px;
    }

ul.cssmenu li.contact a:active {
    background-position: -750px -54px;
    }

/*
*   Selected/Active Links
*/
ul.cssmenu li.home a.selected {
    background-position: 0 -108px;
    }

ul.cssmenu li.photos a.selected {
    background-position: -150px -108px;
    }

ul.cssmenu li.racing a.selected {
    background-position: -300px -108px;
    }
    ul.cssmenu li.blog a.selected {
    background-position: -450px -108px;
    }

ul.cssmenu li.forum a.selected {
    background-position: -600px -108px;
    }

ul.cssmenu li.contact a.selected {
    background-position: -750px -108px;
    }
...