Cambiar el color de fondo del div padre del niño se ciernen en javascript?

Tengo tres cajas de colores en un divtodos de diferentes colores, y cuando me hover en cualquiera de estas casillas tengo que hacer el background-color de los padres div aparecen con el mismo color que el interior de la caja que se cernía sobre él.

CSS:

 .t1_colors {
    float: left;
    width: 100px;
    height: 100px;
    margin-right: 20px;
    border: 1px solid rgb(111,61,69);
    }

HTML:

<div id="task1" class="task">
    <h2>Task 1</h2>
    <p>Change the background color, of the div that     contains this task, to the color in each box when the box is hovered over.</p>
    <p>When the mouse stops hovering over the box, change the background color back to white.</p>
    <div id="t1_color_one" class="t1_colors" style="background: goldenrod;"></div>
    <div id="t1_color_two" class="t1_colors" style="background: lightgreen;"></div>
    <div id="t1_color_three" class="t1_colors" style="background: palevioletred;"</div>
</div>

Nuestra clase es el uso de addEventListener si que hace algo más fácil. Gracias de antemano por cualquier respuesta, y será muy apreciada.

OriginalEl autor Jeremy Stone | 2013-10-29

4 Kommentare

  1. 4

    Buscar en JavaScript puro:

    <div>
      <div id="child" onMouseOver="this.parentNode.style.background='red'">Hover Me</div>
    </div>

    Con jQuery:

     $("#child").hover(function(){
         $(this).parent().css("bakground,"red");
     });

    ACTUALIZACIÓN no Clic del Ratón.

    Simplemente no funciona. ¿Qué es onHover?!!!
    Sintaxis y ortografía, errores – bakground debe leer background y necesita un cierre "

    OriginalEl autor Federico Piragua

  2. 0
    var parent = document.getElementById("task1");//get parent element
    
    var item1 = document.getElementById("t1_color_one");//get child element
    
    item1.addEventListener("mouseover", func, false);//add event listener for first item on mouseover and call func when someone mouse overs it
    
    function func()
    {  
      parent.setAttribute("style", item1.getAttribute("style"));//set the style attribute of the parent to the style attribute of the child
    }

    y, a continuación, usted puede hacer algo similar para el resto de ellos.

    OriginalEl autor Gabriel Sadaka

  3. 0

    Aquí está la respuesta en javascript puro

    window.addEventListener('load', function(event)
    {
        var divs = document.getElementsByClassName('t1_colors');
        var count_of_divs = divs.length;
    
        for(var i = 0; i<count_of_divs; i++)
        {
            divs[i].addEventListener('mouseover', function(e)
            {
                document.getElementById('task1').setAttribute('style', e.target.getAttribute('style'));
            }, false);
    
            divs[i].addEventListener('mouseout', function(e)
            {
                document.getElementById('task1').removeAttribute('style');
            }, false)
        }
    }, false);

    Y se puede comprobar en jsFiddle enlace.

    OriginalEl autor Khamidulla

  4. 0

    Utilice el siguiente código:

    <html>
        <head>
            <style>
                .t1_colors {
                float: left;
                width: 100px;
                height: 100px;
                margin-right: 20px;
                border: 1px solid rgb(111,61,69);
                }
            </style>
        </head>
        <body>
            <div id="task1" class="task">
                <h2>Task 1</h2>
                <p>Change the background color, of the div that     contains this task, to the color in each box when the box is hovered over.</p>
                <p>When the mouse stops hovering over the box, change the background color back to white.</p>
                <div id="t1_color_one" class="t1_colors" style="background: goldenrod;">ugy</div>
                <div id="t1_color_two" class="t1_colors" style="background: lightgreen;">hjk</div>
                <div id="t1_color_three" class="t1_colors" style="background: palevioletred;">jkk</div>
            </div>
        </body>
        <script>
            try
            {
                function change_bgcolor(elem)
                {
                    elem.addEventListener('mouseover', function(){elem.parentNode.style.backgroundColor=elem.style.backgroundColor}, false);
                }
    
                function f1()
                {
                    div_arr=document.getElementsByTagName('div');
                    for(x in div_arr)
                    {
                        if(div_arr[x].parentNode.tagName=="DIV")
                        {
                            change_bgcolor(div_arr[x]);
                        }
                    }
                }
            }
            catch(e)
            {alert(e);}
            onload=f1();
        </script>
    </html>

    El violín aquí

    OriginalEl autor Rajesh Paul

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea