Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve the mouse suspension box effect for everyone. Xiaobian thinks it is quite practical, so share it with everyone for a reference. I hope you can gain something after reading this article.

specific contents are as follows

Effect:

html：

Mouse touch element hover box

js：

export default { name: '', data() { return { popUpShow:false, positionStyle:{top:'0px',left:'0px'} } }, methods: { enter() { this.popUpShow = true }, leave() { this.popUpShow = false }, move(event) { const x = event.pageX + 15 + 'px' const y = event.pageY + 10 + 'px' this.positionStyle = { top: y, left: x } } }}

css：

.hover_con{ position: fixed; max-width: 220px; padding: 10px; border: 1px solid #666; background: #ccc;}

About the difference between offsetX, offsetY, clientX, clientY, pageX, pageY, screenX, screenY

offsetX, offsetY: X,Y coordinates of the mouse relative to the srcElement

clientX, clientY: X, Y coordinates (window coordinates) of the mouse relative to the viewable area of the browser window, excluding toolbars and scroll bars.

pageX, pageey: Similar to event.clientX, event.clientY, but they use document coordinates instead of window coordinates. These two attributes are not standard attributes, but they are widely supported. These two attributes are not present in IE events

screenX, screenY: X,Y coordinates of the mouse relative to the upper-left corner of the user's display screen.

About "vue how to achieve the mouse suspension box effect" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.