Establecer el color de fondo con JavaScript rompe el comportamiento de desplazamiento del CSS

Question

Apr 26, 2014, 04:38 PM

Establecer el color de fondo con JavaScript rompe el comportamiento de desplazamiento del CSS

Estoy tratando de crear un menú en el que el elemento seleccionado actualmente (seleccionado) tenga un color de fondo diferente al de los otros elementos (estoy tratando de lograr esto usando JavaScript). También uso el CSS:hover pseudoclase para resaltar el elemento suspendido resaltándolo. Sin embargo, me he encontrado con un problema extraño: cuando configuro el color de fondo de cualquier elemento con JavaScript, su comportamiento de desplazamiento del CSS ya no funciona. Es decir, no puedo resaltar el elemento suspendiéndolo más. Lo he comprobado en Firefox y Chromium. Este es el caso tanto de jQuery como de JavaScript simple.

El código está abajo. Lo he simplificado mucho para reducir el problema. Primero intente pasar el cursor sobre cualquiera de los elementos del menú, luego haga clic en el enlace "Establecer color de fondo" y vuelva a colocar uno de los elementos del menú. Lo que espero es que el elemento se ponga rojo (# f00) cuando se desplace, independientemente de si se hizo clic o no en el botón "Establecer color de fondo".Para enlaces jsfiddle, vaya al final.

JavaScript de vainilla:

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

Y aquí están los enlaces de jsfiddle.net para su conveniencia:
JavaScript puro:http://jsfiddle.net/5yQFM/1/
jQuery:http://jsfiddle.net/5yQFM/