Question

我是Javascript / jQuery / CSS / HTML的初学者。谢谢你的阅读！

我的代码使用XML请求逐行读取多个文本文件到Javascript中。每行保存矩形的坐标和矩形的相关叠加文本。如下面的代码片段所示，我为文本文件的每一行创建了一个区域元素（一个矩形）。然后我将每个区域元素附加到地图'demo'。然后我将所有这些区域元素转换为div CSS元素，这样我就可以使用jQuery .show（）方法显示和隐藏矩形。这样做的问题是，当我使用.show（）时，有这么多的矩形会有明显的滞后。

所以我一直在尝试实现CSS悬停选择器以更加即时地显示矩形并且一直停留在语法上。我所有的矩形CSS div（见下面的代码）都是类“area”。我在HTML头中尝试过这样的事情：

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

但没有结果。我想我必须以某种方式在jQuery中执行'hover'动作，但不知道如何做到这一点。

这是一个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父ID或类

替换文档

使用CSS悬停与jQuery（语法）

1 个答案: