Javascript CSS/JS：将鼠标悬停在元素上会突出显示另一个元素_Javascript_Css_Mouseenter_Onmouseout_Mousehover

Javascript CSS/JS：将鼠标悬停在元素上会突出显示另一个元素

javascript css

Javascript CSS/JS：将鼠标悬停在元素上会突出显示另一个元素,javascript,css,mouseenter,onmouseout,mousehover,Javascript,Css,Mouseenter,Onmouseout,Mousehover,我正在创建一个网格，它可以有n行，并分为两个视图：leftChild和rightChild。leftChild的行数与rightChild的行数相同，但leftChild保持不变。rightChild的唯一区别是它可以水平滚动。当我将鼠标悬停在leftChild或rightChild元素上时，我想添加某种悬停效果。。。这很简单，但我想做的是在整行添加悬停效果。因此，如果我将鼠标悬停在leftChild中的第三行上，我想突出显示rightChild中的第三行现在，理想情况下，我希望有一个完整的C

我正在创建一个网格，它可以有

n行

，并分为两个视图：leftChild和rightChild。leftChild的行数与rightChild的行数相同，但leftChild保持不变。rightChild的唯一区别是它可以水平滚动。当我将鼠标悬停在leftChild或rightChild元素上时，我想添加某种悬停效果。。。这很简单，但我想做的是在整行添加悬停效果。因此，如果我将鼠标悬停在leftChild中的第三行上，我想突出显示rightChild中的第三行

现在，理想情况下，我希望有一个完整的CSS解决方案，类似于，但这是不可能的，因为我的行不是紧跟在后面。我试着想出另一种解决方法，但是用直接的CSS似乎是不可能的

输入JavaScript。我认为下一步是将JavaScript与CSS结合起来。我可以将悬停效果添加到行中，然后使用JavaScript将悬停类添加到另一个子行中的相应行中。这对于jQuery来说非常简单，但我正在寻找一种本地JavaScript方法

我考虑的主要方法是在每个row类元素上添加一个

mouseenter

和

mouseleave

。我真的不喜欢这种方法，因为我在每行元素上设置了两个事件侦听器。。。这似乎有点低效。无论如何，当您输入时，您将获取悬停内容的行号，然后将悬停类添加到所有这些行号元素中。当您离开时，您只需找到带有hover的所有元素，并相应地删除它们。相应代码如下：

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>

jsFiddle：

所以我想知道一些事情

这是可能的，只是直接的CSS

如果没有，我如何使我的方法更有效

使用一个事件处理程序还是多个事件处理程序更有效

我知道我在这里问了很多问题，但我讨厌问多个问题，尤其是如果我不得不重复我自己的话。我非常感谢你的帮助。谢谢

通过css使用以下结构：不，在css级别4可用之前不可用

使用

this

并选中

className

将新规则附加到它

moouse悬停和鼠标离开

我通过jquery得到了这个结果，但是对于测试，我删除了类

.row

，并保留了编号的类

$（“[class*='row']”）。悬停(
函数（）{
$（'head'）.append（'.+this.className+'{背景色：浅蓝色；}'）；
$（this.mouseleave（function（）{$（'style.+this.className）.remove（）；}）；
});

基于此，我所用的直接JavaScript方法是最快的，混合方法只差一秒——我的意思是非常接近本机JS方法——而jQuery方法（几乎完全）排在最后——与其他两种方法相比速度非常慢

所有这些都可以在网站上看到

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|$)/, '');
            }
        };
    }
}

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

// 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');
        };
    }
});*/

//本机JS方法。。。最快的（根据我的jsPerfhttp://jsperf.com/removeclass-vs-native-js-remove-class/2)
已加载函数（）{
var rows=document.getElementsByClassName（'row'）；
对于（变量i=0；i

我宁愿不这样做，实际上我正在尝试使用SlickGrid（它使用div/span）。。。这只是一个小问题。但这比我的原生JavaScript方法更有效吗？我想答案是“不”。而且，它并没有突出显示整行。。。它跳过了分隔条，我在中间加了一个边距，表示这是两个不同的元素。我使用jQuery，因为您可以使用简单的CSS选择器。当然，如果你的站点上只需要jQuery这个功能，如果它还没有在浏览器缓存中，那么访问者只需要使用一次avearge 30KO到dl。是的，但是jQuery增加了一点开销，所以我认为直接的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');
        };
    }
});*/