CSS / JS：將鼠標懸停在元素上會突出顯示另一個元素

Question

我正在創建一個可以有n rows並分為兩個視圖的網格：leftChild和rightChild。 leftChild與rightChild的行數相同，但leftChild保留在原處。 與rightChild的唯一區別是它可以水平滾動。 當我將鼠標懸停在leftChild或rightChild元素上時，我想添加某種懸停效果……這很容易，但是我想要做的是在整個行中添加懸停效果。 因此，如果將鼠標懸停在leftChild的第三行上，則要突出顯示rightChild的第三行。

現在，理想情況下，我希望有一個類似於this的完整CSS解決方案，但這是不可能的，因為我的行不會緊跟彼此。 我試圖考慮解決此問題的另一種方法，但是使用直接CSS似乎不可能。

輸入JavaScript。 我在想下一步是將JavaScript與CSS結合起來。 我可以將懸停效果添加到一行，然后使用JavaScript將懸停類添加到另一個孩子的相應行中。 使用jQuery相當簡單，但是我正在尋找一種本機JavaScript方法。

我正在考慮的主要方法是在每個行類元素上添加mouseenter和mouseleave 。 我真的不喜歡這種方法，因為那時候我在每個行元素上設置了2個事件偵聽器……這似乎效率不高。 無論如何，當您輸入時，您將獲取要懸停的行的行號，然后將懸停類添加到所有這些行號元素中。 離開時，只需找到所有帶有懸停的元素，然后相應地將其刪除。 相應的代碼如下：

的HTML

<body onload="loaded()">
    <div id="parent">
        <div id="leftChild">
            <div>left child</div>
            <div class="row row1">some content</div>
            <div class="row row2">other content</div>
            <div class="row row3">more content</div>
        </div>
        <div id="rightChild">
            <div>right child</div>
            <div class="row row1">
                <span class="col1">column 1 content</span>
                <span class="col2">column 2 content</span>
                <span class="col3">column 3 content</span>
                <span class="col4">column 4 content</span>
                <span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
            </div>
            <div class="row row2">
                <span class="col1">column 1 content</span>
                <span class="col2">column 2 content</span>
                <span class="col3">column 3 content</span>
                <span class="col4">column 4 content</span>
                <span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
            </div>
            <div class="row row3">
                <span class="col1">column 1 content</span>
                <span class="col2">column 2 content</span>
                <span class="col3">column 3 content</span>
                <span class="col4">column 4 content</span>
                <span class="col5">column 5 content some really long content to trigger scrolling just for the purpose of this example</span>
            </div>
        </div>
    </div>
</body>

JS

function loaded() {
    /*var parent = document.getElementById('parent');
    parent.onmouseenter = function(event) {
        console.log(event.target);
    };
    parent.onmouseleave = function(event) {
        console.log(event.target);
    };*/

    var rows = document.getElementsByClassName('row');
    for (var i = 0; i < rows.length; i++) {
        rows[i].onmouseenter = function(event) {
            var splits = event.target.className.split(" ");
            var elems = document.getElementsByClassName(splits[splits.length - 1]);
            for (var j = 0; j < elems.length; j++) {
                elems[j].className += " hover";
            }
        };

        rows[i].onmouseleave = function(event) {
            var hovers = document.getElementsByClassName('hover');
            var len = hovers.length;
            for (var j = 0; j < len; j++) {
                hovers[0].className = hovers[0].className.replace(/\shover(\s|$)/, '');
            }
        };
    }
}

的CSS

.row:hover, .hover {
    background-color: lightblue;
}

.row {
    height: 50px;
    padding: 5px;
    white-space: nowrap;
}

.row > span {
    display: inline-block;
    border: 5px solid black;
}

#leftChild, #rightChild {
    float: left;
}

#rightChild {
    width: 300px;
    overflow: auto;
}

#rightChild .row {
    display: inline-block;
}

jsFiddle ：這里

所以我想知道幾件事。

單純的CSS是否有可能？
如果沒有，如何使我的方法更有效？
有一個事件處理程序或多個事件處理程序更有效嗎？

我知道我在這里要問很多問題，但是我討厭問多個問題，特別是如果我不得不重復自己的話。 我將不勝感激。 謝謝！

Answer 1

通過具有以下結構的css：不，不在css 4級可用之前。
使用this並檢查className以在新規則后附加到它
鼠標懸停和鼠標離開？

我得到這個：通過jquery，但是為了測試，我刪除了類.row並保留了編號

$("[class*='row']").hover(
  function () {
      $('head').append('<style class="'+this.className+'" rel="stylesheet" > .'+this.className+' {background-color:lightblue;} </style>'); 
$(this).mouseleave(function() {  $('style.'+this.className).remove();});
});

http://codepen.io/gcyrillus/pen/bhglr

Answer 2

基於這個jsPerf ，我所擁有的直接JavaScript方法是最快的，混合方法緊隨其后 -我的意思是真的很接近本機JS方法-並且（幾乎完全是）jQuery方法已死了最后-與其他兩個相比確實很慢。

所有這些都可以在jsFiddle中看到。

JS

// Native JS approach... fastest (according to my jsPerf http://jsperf.com/removeclass-vs-native-js-remove-class/2)
function loaded() { 
    var rows = document.getElementsByClassName('row');
    for (var i = 0; i < rows.length; i++) {
        rows[i].onmouseenter = function(event) {
            var row = this.className.match(/row-[\d]+/);
            var elems = document.getElementsByClassName(row[0]);
            for (var j = 0; j < elems.length; j++) {
                elems[j].className += " hover";
            }
        };

        rows[i].onmouseleave = function(event) {
            var hovers = document.getElementsByClassName('hover');
            var len = hovers.length;
            for (var j = 0; j < len; j++) {
                hovers[0].className = hovers[0].className.replace(/\shover(\s|$)/, '');
            }
        };
    }
}

// jQuery approach (slowest)
/*$(document).ready(function() {
    $('.row').on('mouseenter', function(event) {
        var row = this.className.match(/row-[\d]+/);
        $('.' + row).addClass('hover');
    });

    $('.row').on('mouseleave', function(event) {
        $('.hover').removeClass('hover');
    });
});*/

// Hybrid approach (basically as fast as native JS approach)
/*$(document).ready(function() {
    var rows = document.getElementsByClassName('row');
  for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseenter = function(event) {
      var row = this.className.match(/row-[\d]+/);
      $('.' + row[0]).addClass('hover');
    };

        rows[i].onmouseleave = function(event) {
            $('.hover').removeClass('hover');
        };
    }
});*/

CSS / JS：將鼠標懸停在元素上會突出顯示另一個元素

問題描述

2 個解決方案

解決方案1
0 2013-06-19 03:28:38

解決方案2
0 已采納 2013-06-21 01:01:31

CSS / JS：將鼠標懸停在元素上會突出顯示另一個元素

問題描述

2 個解決方案

解決方案1 0 2013-06-19 03:28:38

解決方案2 0 已采納 2013-06-21 01:01:31

解決方案1
0 2013-06-19 03:28:38

解決方案2
0 已采納 2013-06-21 01:01:31