Desplace el mouse sobre el elemento y resalte todos los elementos con la misma clase

Tengo muchos elementos con la misma clase en una página web. Me gustaría resaltar todos estos elementos cuando cierro uno de ellos. ¿Cómo puedo hacer eso en CSS?Desplace el mouse sobre el elemento y resalte todos los elementos con la misma clase

En este momento, tengo unas pocas cosas CSS:

p.un:hover { background-color:yellow;}

Y mi HTML:

<div class="book"> 
    <div class="page left"> 
    <p class="un">Karen…</p> 
    </div> 
    <div class="page right"> 
    <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p> 
    </div>

Fuente

2012-10-08 Justin D.

Usted tendrá que usar javascript .. –

CSS es principalmente un padre -> relación niño. Hay selectores hermanos (http://css-tricks.com/child-and-sibling-selectors/) pero esto solo funcionará si los elementos están en el mismo nivel, necesitamos ver su configuración. – TheZ

Las etiquetas de párrafo anidado no se pueden activar entre sí con solo CSS en esa configuración. Eso requeriría javascript. – TheZ

Lo mejor que puede hacer uso de CSS puro es la siguiente:

.classname:hover ~ .classname { 
    background-color: yellow; 
}

Pero esto solo destaca a todos los hermanos con una clase classnamedespués de th Elemento suspendido.

Debe usar JavaScript para resaltar todos los elementos;

var elms = document.getElementsByClassName("classname"); 
var n = elms.length; 
function changeColor(color) { 
    for(var i = 0; i < n; i ++) { 
     elms[i].style.backgroundColor = color; 
    } 
} 
for(var i = 0; i < n; i ++) { 
    elms[i].onmouseover = function() { 
     changeColor("yellow"); 
    }; 
    elms[i].onmouseout = function() { 
     changeColor("white"); 
    }; 
}

Si tiene varias clases y quiere generalizar esto, usar algo como esto:

var classes = ["one", "two", "three"]; //list of your classes 
var elms = {}; 
var n = {}, nclasses = classes.length; 
function changeColor(classname, color) { 
    var curN = n[classname]; 
    for(var i = 0; i < curN; i ++) { 
     elms[classname][i].style.backgroundColor = color; 
    } 
} 
for(var k = 0; k < nclasses; k ++) { 
    var curClass = classes[k]; 
    elms[curClass] = document.getElementsByClassName(curClass); 
    n[curClass] = elms[curClass].length; 
    var curN = n[curClass]; 
    for(var i = 0; i < curN; i ++) { 
     elms[curClass][i].onmouseover = function() { 
      changeColor(this.className, "yellow"); 
     }; 
     elms[curClass][i].onmouseout = function() { 
      changeColor(this.className, "white"); 
     }; 
    } 
};

Fuente

2012-10-08 17:49:09 Chris

Imagine la cantidad de gente que echará espuma en la boca si se implementa el selector de temas: '!. Classname ~. Classname: hover,. nombre de clase: hover ~ .classname' - bueno, quizás no mucho. – BoltClock

No funciona. Puse su código en una etiqueta de script: ' '. –

¿Debo usar CSS con esta configuración? –

Gracias a la respuesta de Chris. Usé su código para escribir una función simple que hace el trabajo. Puede colocar la función en el <head></head>, pero debe llamarla cuando la página se haya cargado, es decir, coloque en el extremo del cuerpo. colorout es el color de fondo

La función:

function hoverByClass(classname,colorover,colorout="transparent"){ 
    var elms=document.getElementsByClassName(classname); 
    for(var i=0;i<elms.length;i++){ 
     elms[i].onmouseover = function(){ 
      for(var k=0;k<elms.length;k++){ 
       elms[k].style.backgroundColor="orange";//colorover; 
      } 
     }; 
     elms[i].onmouseout = function(){ 
      for(var k=0;k<elms.length;k++){ 
       elms[k].style.backgroundColor=colorout; 
      } 
     }; 
    } 
}

y llamar a la función como esta:

hoverByClass("un","yellow"); 
hoverByClass("un2","pink");

Sé que la pregunta es viejo, pero tal vez ayudar a alguien más :)

Inténtelo aquí:

function hoverByClass(classname,colorover,colorout="transparent"){ 
 
\t var elms=document.getElementsByClassName(classname); 
 
\t for(var i=0;i<elms.length;i++){ 
 
\t \t elms[i].onmouseover = function(){ 
 
\t \t \t for(var k=0;k<elms.length;k++){ 
 
\t \t \t \t elms[k].style.backgroundColor=colorover; 
 
\t \t \t } 
 
\t \t }; 
 
\t \t elms[i].onmouseout = function(){ 
 
\t \t \t for(var k=0;k<elms.length;k++){ 
 
\t \t \t \t elms[k].style.backgroundColor=colorout; 
 
\t \t \t } 
 
\t \t }; 
 
\t } 
 
} 
 
hoverByClass("un","yellow"); 
 
hoverByClass("un2","pink");

<div class="book"> 
 
    <div class="page left"> 
 
    <p class="un">Karen…</p><p class="un2">Karen2…</p> 
 
    </div> 
 
    <div class="page right"> 
 
    <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p><p class="un2">Karen2 ne se retourne pas. Mme Tilford2 reste là, apparemment confuse et abattue.</p> 
 
    </div> 
 
</div>

Fuente

2016-07-21 10:18:54 WuerfelDev

Desplace el mouse sobre el elemento y resalte todos los elementos con la misma clase

Respuesta

Cuestiones relacionadas