Develop Reference

hover does not active when trying to see hidden qr code bar?

I am trying to clone a website and here is this website's link
https://shopee.vn/
as you can see in this picture, when I hover the mouse to the line name "tải ứng dụng"
it will show the QR code
picture about problem 1
my problem is, I want to use some extensions like page ruler redux to measure the QR code's size, but it disappear when I move the mouse to another position (I click to the hover at the force element state, but it still disappear).
I think that when I click to the hover at the force element state, it must show the QR code and it will not disappear ?
Could you please give me some way to make it display to measure it?
Thank you very much for your time.

The Chrome/Edge Dev tools have a built-in measurement function, hopefully this gets what you want.
Right-click => Inspect element on the link, expand the div and click on the :after selector
Making sure the inspect element page is in focus (the last thing you clicked on), hover over the link
With only the arrow keys on your keyboard, navigate the element tree (up/down to move up and down, left/right to expand, enter if you want to copy a property, like the image url). As long as you don't click, the element stays up.

find the QR code element node by chrome devtools, as you can see in this picture, the div html which one has a classname be named shopee-drawer__contents
picture about how to find element node name
In chrome devtools console, you can print it out or use document method to measure it.
For instanse document.getElementByClass('shopee-drawer__contents').getBoundingClientRect()
print out width & height

Clicking and holding "through" elements

My page has two overlapping elements: a body that displays a DWG file, and a canvas that's only displayed when the user selects a specific option and covers the entire body.
When the canvas is hidden away, the user can drag the file by clicking, holding and dragging, but when the canvas is placed over it, the option is unavailable.
I need a way to click into the canvas and drag the underlying body. So far, I've added a mousedown function that hides the div and a mouseup function that brings it back, and both are functioning as intended. However, I'm yet to find a way to "bleed" this click through to the body to make it movable as mousedown still "sees" the click into the canvas. Displaying the canvas, or moving it while the body is being moved, is not required.
I've tried using the "FireEvent" method described this question with both "click" and "mousedown" events to no avail.

If I've understood the question right, you can use the pointer-events: none CSS property to click through an element.
See this Codepen to see pointer-events: none in action: https://codepen.io/trustedtomato/pen/bGdVvwX

Detect hover in overlaying element while allowing all pointer actions

I am building an audio player in a SPA and have a main player widget that shows the currently playing track along with controls at the bottom of the page. The desired UI is to hide all controls but the play/pause button until the user hovers near the play/pause button. At this point the extra information, seek bar, volume controls etc. will be animated onto the screen.
Excuse my shoddy drawing
I should add that the controls are positioned fixed to the bottom of the screen.
Initially, I tried adding an extra fixed positioned div on top of everything (high z-index) and using that to trigger the hover event. Obviously, this doesn't allow for clicking the buttons below it so I tried pointer-events: none on the element but then no hover event is registered.
I then tried putting the hover region underneath the control elements and adding the hover trigger to both the hover region and the controls. This causes strange behavior when moving the cursor between the hover region and any controls (i.e. to click pause/play).
My next thought is to scrap the hover region HTML element and use a pure JS solution. I could register a mousemove event to the document body and detect when the cursor is within the hover region, triggering control animations. However, I am worried this might cause performance issues as seems a bit heavy.
I hope someone has some input/improvements on the things I have tried or comes up with something I haven't thought of!
BTW: I am using angular2 for the animation if that sparks some bright ideas to use that.
Update 1
Here's a jsFiddle showing the first two attempts. Change the z-index of hover-region to see the effect of it being on top of the play button or below.

I've created a working version for you at http://jsfiddle.net/6wk69fvo/1/. You already did what I was going to suggest, which is to use onmouseenter and onmouseleave.
But rather than just checking the hover area, you also need to check the toolbar area, and then just OR the two values together.
Also note that I put the play / pause button as a child of the hover area. If you don't want to do that, you'd need to create a third check for mouseenter or mouseleave for that div.

You can alter the control's opacity make it visible/invisible. Here is a simple example done in pure html/js to avoid the overhead of setting up an ng2 app, yet, I'm sure you can quickly adapt it to your code.

Get element that the mouse is hover on without moving mouse - jQuery JavaScript

I have an application that contains several transitioning elements. These same elements react to mouseenter and mouseleave events. These events are deactivated during transitions to avoid users interacting with elements in transit.
The problem comes in when one of these elements are underneath the mouse when they are made active again. Once the moving elements are no longer moving, they should again register that the mouse is hovering on top of them. But since the mouseenter took place whilst the element was deactivated, the event is not fired once the element is made active once more.
If you then move your mouse off of the element, and then on again, it works fine. This is obviously not very user friendly.
Is there a way to register that the mouse is hovering on an element without moving the mouse?
More information on the elements discussed above:
The elements in question are large divs that contain a lot of content. They are actually pages in the application that I add and remove dynamically. I have a custom scroll bar that shows if the area has focus, and hides if it does not.
As the mouse moves into the page content area, the custom scroll bar shows. Once it moves out, the scroll bars hide again. All events are made inactive whilst the animation is running.
The problem is that is the mouse moves into the page area whilst a page is animating, the the scroll bars do not (and should not) show. Once the animation completes, however, the application should register that the user is hovering inside of the page area without him moving the mouse outside and back inside this space.

Track the position of the mouse using a mousemove event, and test the element at the last known mouse position when you re-enable the behaviour using
document.elementFromPoint(x, y)

Clicking on an element sets focus but not cursor?

I have an html page where I set the focus on the first input element on load. I can see that the focus is set because I ask the background of the element to go orange and I can see the orange background. However, the cursor is not shown in the element.
Then when I click on the other input elements, I can see the focus move to them but still no cursor is shown. The cursor only appears when I use the tab key.
Please could someone explain to me why this happens and how I can make this cursor appear without having to use the tab key?
This is for IE8 only. (It's an intranet site)
Code as requested for how I'm setting focus:
$(document).ready(function(){
$('#rachel').focus();
});
EDIT
I didn't think to mention that the problem is happening on a popup window that looks to be implemented like a layer. Is it possible for layers to block the cursor?