псевдо класс А: фокус

Question

Пытаюсь узнать больше о псевдоклассе css: focus Я пытаюсь адаптировать некоторый код. Попробовал

a:focus img {border:2px solid rgb(155, 205, 255);}  

и

a:focus img {background:rgb(155, 205, 255);}  

Ни одна работа. Все же

a:hover img {background:rgb(155, 205, 255);}  

отлично работает при наведении. Кто-нибудь знает, что я сделал не так?
Les

Я использую Firefox, но хочу, чтобы это работало кросс-браузерно, если это возможно. Я получаю вспышку, но не устойчивую границу, как эта галерея: http://www.cssplay.co.uk/menu/gallery.html#nogo

Answer 1

Попробуйте установить границу для тега, а не тега изображения внутри него.

Answer 2

Похоже, что нажатие на ссылку, которая приведет вас в другое место на той же странице, приводит к потере этой ссылки. Не самое элегантное решение, но я могу предложить javascript.

Для стиля:

a.selected img{border:9px solid green}  

А потом скрипт:

<script type="text/javascript">
    var last = null;
    function select(element)
    {
        if(last != null)
            last.className = last.className.replace(/ selected/g, "");
        element.className += " selected";
        last = element;
    }
</script>

А затем добавьте обработчик события onclick для каждой ссылки на миниатюру:

<li><a href="#pic1" onclick="select(this);"><img src="thumbs/whatever.jpg" alt="whatever" /></a></li>

Answer 3

Ваши селекторы выглядят нормально.

Несколько вопросов: Какой браузер вы используете? Как сказал Мэтт, вы уверены, что фокусируете метку?

Answer 4

Если вы используете IE8,

Примечание : Internet Explorer 8 (и выше) поддерживает псевдокласс :focus, если указан !DOCTYPE. (Источник: http://www.w3schools.com/CSS/pr_pseudo_focus.asp)

---

Расследование: Видя, что вы используете Firefox, нажмите на пустую страницу и нажмите Tab на клавиатуре со следующим CSS:

a:focus img {border:2px solid rgb(155, 205, 255); padding: 2px;}

Посмотрите, работает ли это, и доложите соответствующим образом.

Кроме того, есть ли у тега <a> другие псевдоклассы, кроме focus?

---

Просто предложение, основанное на вашем примере http://www.cssplay.co.uk/menu/gallery.html#nogo, они сделали это:

#container a.pics:focus img.thumb {border:1px solid #fc0}

Почему бы тебе не сделать это?

a img:focus {border:2px solid rgb(155, 205, 255); padding: 2px;}

Answer 5

Если щелкнуть по нему правой кнопкой мыши, чтобы выделить его, не переходя по ссылке, он изменится?