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

Image hover is centred and not relative to link that is being hovered over

On a website I'm working on I got images inside a container that need to appear over the text on hover. This works smooth BUT..
Whenever an image appears it stays in the same location as the previous hover. I am trying to make the images only appear over the link it is associated with but it won't work.
I have some JavaScript running to randomize the link colors.
You can find the webpage in action over here:http://bravenewfashion.com/menu.html Its on the tab titled 'Biology meets Fashion'

Thanks for the working example. If you nest the image inside of the a tag, it will automatically position itself next to the link. You can then add some rules for top and left to position them over the link like your website does now.
Working JSFiddle Here

WP Metaslider onclick enlarge image same screen

so I'm using WP metaslider for a slideshow/gallery display. Everything works great with it, except instead of clicking on the image in the slider and opening its original size in a new window, I would prefer to click on the image in the slider and it enlarging within the slide, similar to the accordion gallery styles, but I want the image clicked on to get larger and the other images to remain the same size or get smaller.
I've tried CSS and javascript shown here but it did not work.
I am open to other plugins that may give me a closer result than this, but the accordion plugin here is the next closet but I still want to be able to see all of the images without them being cut off.
http://kerimthedj.com/new/photos

div height does not change when the height of other objects in page change

there is this problem that I have and I don't seem to find an answer for.
On my website in my posts, I have added a box to download stuff. when someone clicks on that box, the ul corresponding to that box opens using a javascript onclick function.
now the problem is that the height of the parrent div does not change when this happens so my template does not work correctly.
I can see that "PVII Equal Height Columns 2 script" is used on the parrent div which adds a height property to that div automatically.
I tried fixing it by adding some javascript to rewrite the height whenever I click on the download box but that does not seem to work.
you can see the situation in link below :
http://mrcode.ir/?p=128
just click on the green box in the middle of the page (the one that has a folder) and take a look at the footer so you'll see what I mean.
Thanks

Images on Hover

I have an issue best shown by example: http://dont.net/DesigningIntro/index.html
Here the last "Car Exterior" is opened fully, but not properly opens as like other small bars. It gets hidden while hovering on other links.
I want it to be shown, and not get hidden even if I hover on other tabs.
Any suggestions?

Looks like the problem is the car_L.jpg image in the .jimgMenu ul li.car_ext a element is being moved to the next line when it animates somehow due to the min-width css tag. Removing that causes the image to be set to just 56px wide by the animation when not hovering on it. Not what you want.
However, I kind of made it work by setting the background image for the .jimgMenu Div. See the result here: http://jsbin.com/ayutu and code here: http://jsbin.com/ayutu/edit

I am not 100% sure whether this is causing your issue or not, but it looks like you have the ending of a comment tag before your tag. I would try removing that and see if it fixes the problem first.

When you first come into the page there are 9 accordion panels. when you hover over one there are only eight.
So, do you have the control setup for 9 panels even when you hover? maybe you need to clear out the last panel on hover so the control knows to reclaim the space and then put it back on mouse out.
the next issue then might be that the control will resize because now the last panel is missing so the max width will be less.

Maybe you are forgetting the image for "Car Exterior" of 56x330px? Also, you don't have an image with vertical letters for "Interior".
Then you are not referencing them well, because if I search images on your page with the Firefox's add-on Web Developer Toolbar it doesn't find the images Car Exterior or Interior.