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

This article is to share with you about how vue can achieve the effect of hovering over the mouse. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The details are as follows

The webpack project with vue-cli scaffolding is adopted in the project architecture.

The results are as follows:

The mouse shows a floating box on the right side of the button. The mouse moves out of the buttom element suspension box to hide and the suspension box can change position as the mouse moves.

The full code is as follows:

Suspension box test import $from "jquery"; export default {name: "HelloWorld", data () {return {toolTopbody: ""};}, methods: {itemMouseover: function () {var focusTooltip = $("# focus_toolTip"); focusTooltip.css ("display", "block");}, itemMouseout: function () {var focusTooltip = $("# focus_toolTip") FocusTooltip.css ("display", "none");}, itemMousemove: function (e) {var self = this; var focusTooltip = $("# focus_toolTip"); focusTooltip.css ("top", e.clientY-80 + "px"); focusTooltip.css ("left", e.clientX + 100 + "px") Var headerHtml = "" + "my suspension box reference:" + "; var effectHtml ="+"; self.toolTopbody = headerHtml + effectHtml;}; .buttonStyle {margin-left: 150px;} .special_focus_toolTip {z-index: 7; position: absolute; display: none; width: 400px; height: 130px; border-style: solid Transition: left 0.4s cubic-bezier (0.23,1,0.32,1), top 0.4s cubic-bezier (0.23,1,0.32,1); background-color: rgba (50,50,50, 0.701961); border-width: 0px; border-color: # 333333; border-radius: 4px; color: # ffffff; font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px Font-family: "Microsoft YaHei"; line-height: 21px; padding: 10px 10px;}

The main implementation ideas are as follows:

The suspension box shown first is absolute positioning and starts with a hidden display:none, showing the element focusTooltip.css ("display", "block") when triggering a mouseover event, and hiding it when an itemMouseout event is triggered ("display", "none"). Then when the mouse pointer moves over the specified element, the mousemove event occurs, and the mouse position is obtained through the Event object (Note: the Event object represents the state of the event, such as the element in which the event occurred, the state of the keyboard button, the position of the mouse, the state of the mouse button), then adjust the position slightly, and finally set the top and left attributes to the div element of the suspension box In fact, the suspension box is based on html positioning, and its parent element has no relative positioning position: relative. Otherwise, the attributes of top and left will be affected, because absolute is positioned based on the parent element relative. The overall trigger order of mouse events is mouseover- > mousemove- > mouseout. The content in the last suspension box will be rendered according to the corresponding content of v-html (the content of this display is defined by yourself)

Thank you for reading! This is the end of the article on "how to display the floating box effect after the mouse in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to 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.