3

次のように、同じクラス名を持つ 5 つの div があります。

CSS:

.test:hover{
   color:red;
}

HTML:

<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>

これらの Div がページ上の別の親 Div にあると想像してみてください...

color:red問題の変更だけでなく、5つのいずれかにマウスを合わせると、すべてが変更される方法を見つけようとしています...

私はそれらを親にラップして、その親にホバーを与えることはできません...そもそも同じ親を共有していません。

CSS はこれを行う方法を提供していますか、それとも JavaScript に依存する必要がありますか?

4

5 に答える 5

3

CSSが（まだ）このタスクを実行できないことを考えると、機能する（プレーン/バニラ）JavaScriptアプローチの1つ（[].forEach()、およびをサポートする準拠ブラウザで）は次のとおりです。document.querySelectorAll()

function classToggle (evt, find, toggle) {
    [].forEach.call(document.querySelectorAll('.' + find), function(a){
        a.classList[evt.type === 'mouseover' ? 'add' : 'remove'](toggle);
    });
}

var els = document.querySelectorAll('.test');

for (var i = 0, len = els.length; i<len; i++){
    els[i].addEventListener('mouseover', function(e){
        classToggle(e, 'test', 'highlight');
    });
    els[i].addEventListener('mouseout', function(e){
        classToggle(e, 'test', 'highlight');
    });
}

JS フィドルのデモ。

参考文献:

于 2013-10-20T20:01:29.603 に答える
2

JQueryを使用して、必要なものを簡単に実現できます...これを.htmlファイルにコピーしてテストします...

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script>
        $(document).ready(function() {
            $(".test").hover(
              function() {
                $(".test").css("background-color", "red");
              }, function() {
                $(".test").css("background-color", "");
              }
            );
        });
        </script>
    </head>
    <body>
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div><br />
        <div class="test">My Div</div>
    </body>
</html>
于 2013-10-20T17:52:42.990 に答える
0

現在、CSS を使用して要素の親を選択することはできません。そのため、1 つの要素と一般的な親によって要素を選択することもできません。小さな証明のようなものです。

于 2013-10-20T17:52:42.603 に答える