CSS Cross-Browser Outline Suppression On Click

Имам структура на менюто, която изглежда така:

HTML:

<li>
  <a href="/bg#page">
    <b>Recover Account</b>
  </a>
</li>

CSS:

#nav ul li a
{
  color: #889DBF;
  display: block;
  line-height: 22px;
  padding-left: 20px;
  text-decoration: none;
}

#nav ul li a b
{
  display: block;
  padding-right: 21px;
}

#nav ul li.current a
{
  background: url('/images/nav-left.png') no-repeat;
  color: #111B35;
}

#nav ul li.current a b
{
  background: url('/images/nav-right.png') no-repeat 100% 0;
  color: #111B35;
}

От много много дни се опитвам да намеря решение за различни браузъри, за да потисна стила на контура при щракване, като същевременно го поддържам активиран с навигация в раздели.

Нито едно от решенията, написани на следните страници, не работи за мен: http://people.opera.com/patrickl/experiments/keyboard/test http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links

Някой знае ли как да поправя този проблем? Всяко решение (само CSS, JS, CSS+JS) е добре дошло. Много благодаря предварително!

[TL;DR]
Outline On Click -> DISABLED
Outline On Tab Navigation -> ENABLED
Any cross-browser solution? Thanks!

javascript html css cross-browser outline
person Tommaso Belluzzo    schedule 24.07.2011    source източник

Отговори (2)


arrow_upward
1
arrow_downward

Трябва да използвате JavaScript, за да можете да правите разлика между задействания на събития от клавиатура и мишка.

Част от отговора на вашия въпрос вече беше публикуван в Разграничаване между събитие за фокус, задействано от клавиатура/мишка

И ето пълното решение, използващо jQuery javascript framework:

var isClick;
$(document).bind('click', function() { isClick = true; })
           .bind('keypress', function() { isClick = false; })
           ;
var userInterestHandlers = {
     on: function (e) {
        var $self = $(this);
        var classname =isClick ? 'mouse' : 'keyboard';
        $self.addClass(classname);
    }
    off: function (e) {
        var $self = $(this);
        $self.removeClass('mouse keyboard');
    }
}

$('a').bind ('focus active', userInterestHandlers.on);
$('a').bind ('blur', userInterestHandlers.off);

След това просто дефинирайте желания стил в класовете a.keyboard или a.mouse CSS.

person antitoxic    schedule 24.07.2011
comment
Това решение работи частично за мен само с Chrome. Кое е активното събитие? Не мога да го намеря в документацията на jQuery. - person Tommaso Belluzzo; 25.07.2011
comment
@Zarathos active първоначално е свързан с CSS. Това е състоянието на котва/връзка, когато е натиснат надолу, щракнат надолу, докоснат надолу.. - person antitoxic; 10.02.2012

arrow_upward
1
arrow_downward

CSS:

a:active {
    outline:0 !important;
}
person AlienWebguy    schedule 24.07.2011
comment
Но плакатът посочи, че иска контурът да остане за навигация, базирана на клавиатура. Това го потиска както на клавиатурата, така и на кликванията. Аз лично просто бих направил :active. - person Will Martin; 24.07.2011
comment
Ах, погрешно прочетох TL;DR. Мислех, че е активиран на фокус и това не беше желаният резултат :) - person AlienWebguy; 24.07.2011
comment
Добре момчета, бих искал да го запазя за навигация, базирана на раздели! - person Tommaso Belluzzo; 24.07.2011
comment
Чудесно, ако това работи за вас, моля, щракнете върху отметката до моя отговор :) Благодаря! - person AlienWebguy; 24.07.2011