Наведите указатель мыши на элемент и выделите все элементы с тем же классом

У меня есть много элементов с одним и тем же классом на веб-странице. Я хотел бы выделить все эти элементы, когда я навещу один из них. Как это сделать в CSS?

Ответы

Ответ 1

Самое лучшее, что вы можете сделать, используя чистый CSS, это:

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

Но это только подчеркивает всех братьев и сестер с классом classname после зависающего элемента.

Вы должны использовать JavaScript, чтобы выделить все элементы;

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");
    };
}

Если у вас несколько классов и вы хотите обобщить это, используйте что-то вроде этого:

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");
        };
    }
};

Ответ 2

Благодаря ответу Криса. Я использовал свой код для написания простой функции, которая выполняет эту работу. Вы можете поместить функцию в <head></head>, но вам нужно вызвать ее, когда страница загружена, т.е. Место в конце тела. colorout - это цвет фона

Функция:

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;
            }
        };
    }
}

и вызовите функцию следующим образом:

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

Я знаю, что вопрос старый, но, возможно, это поможет кому-то еще:)

Попробуйте здесь:

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=colorover;
			}
		};
		elms[i].onmouseout = function(){
			for(var k=0;k<elms.length;k++){
				elms[k].style.backgroundColor=colorout;
			}
		};
	}
}
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>