javascript - 在 jQuery 中使用 CSS 悬停(语法)

Question

我是 Javascript/jQuery/CSS/HTML 的初学者。感谢阅读!

我的代码使用 XML 请求将多个文本文件逐行读取到 Javascript 中。每行包含一个矩形的坐标和该矩形的关联覆盖文本。如下面的代码片段所示，我为文本文件的每一行创建了一个区域元素(一个矩形)。然后我将每个区域元素附加到 map “演示”。然后我将所有这些区域元素转换为 div CSS 元素，这样我就可以使用 jQuery .show() 方法显示和隐藏矩形。这样做的问题是有太多的矩形，当我使用 .show() 时会有明显的滞后。

所以我一直在尝试实现 CSS 悬停选择器以更即时地显示矩形并且一直停留在语法上。我所有的矩形 CSS div(见下面的代码)都属于“区域”类。我在 HTML head 中尝试过这样的事情:

<style>
.area:hover {
  background: blue;
}
</style>

但是没有结果。我在想我必须以某种方式在 jQuery 中执行“悬停”操作，但不知道该怎么做。

这是一个描述我想要实现的目标的 jsfiddle:https://jsfiddle.net/d1amzfLx/4/

这是一个代码片段，它在我开始对多个文本文件进行 for 循环并开始将矩形作为区域元素读取之后开始，并在与我鼠标悬停的像素(及其叠加层 ID)对应的每个矩形之后结束) 显示。

    // get text contents by looping over i text files
        j=20000*i + 50000;
        var coords = xhr[i].responseText.split("\n");
        coords = coords.filter(Boolean) //prevents extra rect with 0 coords
        coords.forEach(function(coord) { 
                var area = document.createElement("area");
                area.id = "r"+j;
                area.shape = "rect";
                area.coords = coord.substring(10,coord.length).trim().replace(/ +/g,",");    // replaces spaces in txt file with commas
                area.href = "#";
                area.alt = "r"+j;

                // create overlay with first term in string
                var div = document.createElement("div");
                div.className = "cont";
                div.id ="overlayr"+j;
                div.innerHTML = coord.substring(0,10);
                div.style.display = "none";
                //increase j
                j++;

                document.getElementById("demo").appendChild(area);
                document.getElementById("demo").appendChild(div);
                //all rectangles and their overlay texts are appended to the map 'demo'
            }); 


        //display rectangles and overlay ids by mousing over

        if( $('#demo').length >0 ) { 

            var hoveredElements = [];
            var elementPositions = [];

            $('#demo area').each(function() {
            var offset = this.coords;
            var coordarray = offset.split(",");
            var l = coordarray[0];
            var t = coordarray[1];
            var r = coordarray[2];
            var b = coordarray[3];
            var ident = this.id;
            var w = r - l;
            var h = b - t;  
            var elementDiv = $('<div class="area"></div>')
                .css({position: 'absolute', left: l + 'px', top: t + 'px', border: 'solid', borderColor: 'green' }). 
                width(w).height(h);

            $("body").append(elementDiv);
            elementDiv.hide();      

            //console.log("Top =" + top + ",Left =" + left + ",Bottom =" + bottom + ",Right =" + right); 

            elementPositions.push({ 
                element: elementDiv,
                top: t, 
                bottom: b, 
                left: l, 
                right: r, 
                id: ident, 
            });

                    }); //end of demo area

            //console.log("elementPositions.length=" + elementPositions.length);
            $("body").mousemove(function(e) {
            //console.log("clearing hovered elements");
            hoveredElements.forEach( function(item) {
                item.overlay.hide();
                item.element.hide();
            });

            hoveredElements = [];

            var xPosition = e.pageX;
            var yPosition = e.pageY;
            //console.log(xPosition,yPosition);

            for (var ie = 0; ie < elementPositions.length; ie++) { 
                var id = elementPositions[ie].id;
                    if (xPosition >= elementPositions[ie].left && 
                  xPosition <= elementPositions[ie].right &&
                  yPosition >= elementPositions[ie].top &&
                  yPosition <= elementPositions[ie].bottom) {
                    // The mouse is within the element's boundaries
                    //console.log("Element" + ie + "hit");
                        hoveredElements.push({ 
                         overlay: $('#overlay' + id),
                         element: elementPositions[ie].element,
                    });
                     } 
            } //end of for loop over all elements

            hoveredElements.forEach( function(item) {
                item.overlay.show();
                //item.element.show(); this command shows the CSS div rectangles, but they take too long to load!
            });//end of for loop over all hovered elements

                        }); //end of mousemove function

        }; //end of if demo

Answer 1

这会将所有类 .area 的 div 更改为 background-color:blue;

$(document).on("mouseenter", ".area", function() {
    $( '.area' ).css('background-color','blue');
});

这是你的鼠标离开的时候。默认颜色是指 div 在更改为蓝色之前的背景颜色

$(document).on("mouseleave", ".area", function() {
    $( '.area' ).css('background-color','defaultColor');

});

同样为了更好的性能，你应该用一个.area parent id or class替换文档