22

Webページに同じクラスの要素がたくさんあります。これらの要素の1つにカーソルを合わせると、これらすべての要素を強調表示したいと思います。CSSでそれを行うにはどうすればよいですか？

今、私はこのCSSを持っています：

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

そして私のHTML：

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

2 に答える 2

20

純粋な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");
        };
    }
};
于 2012-10-08T17:49:09.120 に答える
3

クリスからの回答に感謝します。私は彼のコードを使用して、その仕事をする簡単な関数を書きました。関数はに配置でき<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…&lt;/p><p class="un2">Karen2…&lt;/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>

于 2016-07-21T10:18:54.937 に答える