添加CSS类DIV基于光标

页我工作的Y位置：http://working.studioas-cc.com/添加CSS类DIV基于光标

在这里，有项目的标题列表。悬停项目标题时，它会显示以下的特色图片。

如果鼠标光标的Y位置低于浏览器窗口高度的50％，我想要定位这些图像以上的标题。

我想我需要添加一个额外的班级来重新定位它，但我不知道如何去做。

任何帮助非常感谢:)

来源

2017-01-03 Evan

您可以使用“onmousemove”事件来跟踪网页内的鼠标位置。鉴于此，将它的Y位置与窗口高度进行比较并相应地更改班级。

这里的事件监听器给你一个跳跃开始：

document.onmousemove = function(event) { 
    // X position of cursor 
    event.x; 
    // Y position of cursor 
    event.y; 

    if(event.y < (window.innerHeight/2)) { 
    // do something with image classes 
    } else { 
    // do something else 
    } 
}

我建议把事件侦听器性能的原因超时内。

来源

2017-01-03 17:19:31

您可以使用jQuery（我看到你已经使用它）来做到这一点。

$(theTextElement).hover(function(e) { 
    //Mouse Over Event 
    //The Mouse Y Position 
    var y = e.pageY; 
    //The window height 
    var windowY = $(window).height(); 
    //The mouse is past the halfway point of the screen 
    if((windowY/2)<y){ 
    //Toggle the class 
    $(theImageElement).addClass('viewTop'); 
    $(theImageElement).removeClass('viewBottom'); 
    //Show the element 
    $(theImageElement).show(); 
    } 
}, function() { 
    $(theImageElement).hide(); 
});

这是基于您想要用CSS解决定位的假设。你将不得不添加一些代码来找出哪个图像显示等。

让我知道如果有些事情是不清楚的。

来源

2017-01-03 17:17:38

假设你已经知道event.target，window.innerHeight和event.clientY，使用position：fixed和相对于目标位置的定位是一种解决它的方法。

来源

2017-01-03 17:20:02 Orangesandlemons

我假设你想要坚持你当前的实现，即隐藏元素直到被覆盖。

可以使用

elem.getBoundingClientRect().top

返回从页面顶部的距离获得每一个元素的y位置。

您可以使用window.innerHeight来获得窗口的高度。

所以它只是一个为每个元素检查，如果其顶部位置是窗口

elem.getBoundingClientRect().top > window.innerHeight/2

大于半人高的问题，如果上述属实，那么你可以指定元素的类以上出现链接标题，但老实说有很多方法来完成同样的事情。

所以，假设你想添加一个类到标题上方出现的跨度，你可以做一些事情，比如相对定位它们，并添加一个负值或者我会做的就是使用css3变换

.above { 
    transform: translate(0, -100%); 
}

这样你就不需要再次猜测span的高度了，因为css变换使用了目标元素而不是父容器的尺寸。

要记住的另一件事是，为了保持脚本加载到最低限度，可能需要检查onhover事件侦听器中span元素的位置，而不是检查所有这些跨度DOM已准备就绪，因为它们将暂停呈现，直到脚本准备就绪并使页面无响应。

来源

2017-01-03 17:51:11 vassiliskrikonis

添加CSS类DIV基于光标

回答

相关问题