A definição da cor de plano de fundo com JavaScript interrompe o comportamento de foco do CSS

Question

Apr 26, 2014, 04:38 PM

A definição da cor de plano de fundo com JavaScript interrompe o comportamento de foco do CSS

Estou tentando criar um menu em que o elemento atualmente selecionado (clicado) tem uma cor de plano de fundo diferente dos outros elementos (estou tentando conseguir isso usando JavaScript). Eu também uso o CSS:hover pseudoclasse para destacar o elemento pairado, destacando-o. No entanto, encontrei um problema estranho: quando defino a cor de segundo plano de qualquer elemento com JavaScript, seu comportamento de foco instantâneo CSS não funciona mais. Ou seja, não consigo destacar o elemento passando o mouse mais. Eu verifiquei isso no Firefox e no Chromium. Este é o caso do jQuery e do JavaScript simples.

O código está abaixo. Eu simplifiquei muito para diminuir o problema. Primeiro, tente passar o mouse sobre qualquer um dos itens de menu, clique no link "Definir cor do plano de fundo" e passe o mouse sobre um dos elementos do menu novamente. O que eu espero é que o elemento fique vermelho (# f00) ao passar o mouse, independentemente de o botão "Definir cor de fundo" ter sido clicado ou não.Para links jsfiddle, vá para o final.

JavaScript baunilha:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            p#links a {
                display: inline-block;
                width: 80px;
                height: 22px;
                line-height: 22px;
                background-color: #00f;
                color: #fff;
                text-decoration: none;
                text-align: center;
                font-family: sans-serif;
            }

            p#links a:hover {
                background-color: #f00;
            }       
        </style>
        <title>Background color</title> 
    </head>
    <body>
        <p id="links">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
        </p>
        <a href="#" id="setbgcolor">Set background color</a>

        <script>
            document.getElementById('setbgcolor').onclick = function() {
                var p = document.getElementById('links');
                var elements = p.getElementsByTagName('a');
                for (var i = 0; i < elements.length; i++)
                    elements[i].style.backgroundColor = '#ff0';
            };
        </script>
    </body>
</html>

jQuery:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="jquery-1.11.0.js"></script>
        <style>
            p#links a {
                display: inline-block;
                width: 80px;
                height: 22px;
                line-height: 22px;
                background-color: #00f;
                color: #fff;
                text-decoration: none;
                text-align: center;
                font-family: sans-serif;
            }

            p#links a:hover {
                background-color: #f00;
            }       
        </style>
        <title>Background color</title> 
    </head>
    <body>
        <p id="links">
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
            <a href="#">Link 4</a>
        </p>
        <a href="#" id="setbgcolor">Set background color</a>

        <script>
            $('a#setbgcolor').click(function() {
                $('p#links a').css('background-color', '#ff0');
            });
        </script>
    </body>
</html>

E aqui estão os links do jsfiddle.net com a finalidade de conveniência:
JavaScript puro:http://jsfiddle.net/5yQFM/1/
jQuery:http://jsfiddle.net/5yQFM/