1. Application scenarios
The div pops up the mouse hover and cannot be hidden immediately after the mouse leaves, because there is also a function portal on this div. for example:
The effect of displaying the profile card when the mouse passes through the friend's avatar in the friend list is as follows:
Display QR code when hover
2. Realization
Use a simple effect like this: the mouse hover to display B on A to simulate
There are two ways to implement it. The second one is recommended. The first one has its disadvantages. I will talk about it below.
1. Method 1
Principle: Put the trigger element A and the displayed element B in the same parent element, and the display B is triggered when the mouse passes through the parent element. This way, when the mouse moves to B, the div will not be hidden.
Code:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>hover A show B</title><script src="http://code.jquery.com/jquery-1.12.2.min.js"></script><style type="text/css">#hook { float: left; margin: 10px 0 10px 10px; width: 50px; height: 50px; background-color: #ccc; }#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }</style></head><body><div id="hoverWrap"> <div id="hook">A</div> <div id="msg-box">Function module B</div></div><script type="text/javascript">$("#hoverWrap").hover(function(){ $("#msg-box").toggle();});</script></body></html>This method is relatively simple to implement, but it requires wrapping a layer of parent tags and has a disadvantage: the two elements cannot be spaced.
2. Method 2
Principle: When the mouse passes A, B pops up, moves A out, sets a timer to delay by 0.5s and then closes B, so you need to judge when moving into A. If there is a timer, clear the timer first and then display B.
When the user leaves A, which triggers the event, the data card div needs to be delayed by 0.5 seconds before closing. The user has enough time to perform the corresponding operation. When the mouse moves into the data card B, the timer in B that was previously timed to close B.
The complete code is as follows:
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>hover A show B</title><script src="http://code.jquery.com/jquery-1.12.2.min.js"></script><style type="text/css">#hook { float: left; margin: 10px; width: 50px; height: 50px; background-color: #ccc; }#msg-box { border: 1px solid black; width: 200px; height: 150px; display: none; float: left; padding: 10px }</style></head><body><div id="hook">A</div><div id="msg-box">Function Module B</div><script type="text/javascript">var timer;$("#hook,#msg-box").bind("mouseover",showMsgBox);$("#hook").bind("mouseout",hideMsgBox);$("#msg-box").bind("mouseout",function(){ if(timer){clearTimeout(timer);} $("#msg-box").hide(); });function showMsgBox(){ if(timer){clearTimeout(timer);} $("#msg-box").show();}function hideMsgBox(){ timer=setTimeout(function(){ $("#msg-box").hide(); },500);}</script></body></html>js part:
<script type="text/javascript">var timer;$("#hook,#msg-box").bind("mouseover",showMsgBox);$("#hook").bind("mouseout",hideMsgBox);$("#msg-box").bind("mouseout",function(){ if(timer){clearTimeout(timer);} $("#msg-box").hide(); });function showMsgBox(){ if(timer){clearTimeout(timer);} $("#msg-box").show();} function hideMsgBox(){ timer=setTimeout(function(){ $("#msg-box").hide(); },500);}</script>Things to note
1. Use mouseover instead of mousemove to trigger events.
mouseover: Triggered when the mouse moves over the target element.
mousemove: The mouse keeps triggering when moving inside the element.
Therefore, mouseover and mousemove consume resources.
For more information, please refer to: http://www.cnblogs.com/starof/p/4106904.html
2. Declare it before calling timer
If not declared, the timer will not be declared the first time the mouse is moved out, so an error will be reported when the mouse is moved in for the first time.
3. The timer must be cleared before calling the mouseover event
If not cleared, B will be automatically closed after 0.5s.
3. Package into a universal function
Considering that this function is more general, it is packaged. Because js needs to deal with some compatibility issues, it is written in jquery.
/*** @Description Mouse hover to oHook to display oMsgBox. * @Author liuxiaoyan * @Date 2016-03-24 15:01:13* @Last Modified by: liuxiaoyan* @Last Modified time: 2016-03-24 15:01:13*//*** @param oHook: Elements to hover* @param oMsgBox: Elements to be displayed on hover* Call example: hoverShowMsg.init({hook:$(".viewPhone"),msgBox:$(".viewPhonescan")});*/var hoverShowMsg=(function(){ var oHook, oMsgBox, timer; function init(o){ oHook=o.hook; oMsgBox=o.msgBox; bindEvent(); } function bindEvent(){ oHook.bind({ mouseover:showMsgBox, mouseout:hideMsgBox }); oMsgBox.bind({ mouseover:showMsgBox, mouseout:function(){ if(timer){clearTimeout(timer);} oMsgBox.hide(); } }); } function hideMsgBox(){ timer=setTimeout(function(){ oMsgBox.hide(); },500); } function showMsgBox(){ if(timer){clearTimeout(timer);} oMsgBox.show(); } return{init:init};})();The above is the full content of how to achieve the effect of displaying information cards (recommended) based on JS based on QQ friend avatar hover. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply you in time. Thank you very much for your support for Wulin.com website!