How to inspect an element that only appears while I'm hovering another element? As soon as I hover out, the element disappears.
I'm not too sure if the hover effect is done with a CSS class or javascript though.
Its depend on which browser you are using. there is option to select the hover state.
Chrome as a Example:
Related
I am running WordPress 5.2 on the default theme and made a custom nav bar where I used CSS so the dropdown menu is invisible unless its parent is hovered over. Recently it stopped working (when I hover over it doesn't appear).
When I use the Chrome console to turn the element:hover on and inspect the dropdown menu, it shows the element is there (CSS attribute display is indeed set to block instead of none). I checked z-index and opacity (2 and 1 respectively) so I don't think that is the issue.
http://ess.ccmcanada.org
Page while inspecting element:
You have to remove overflow-y: hidden from #main-nav, because this is hiding the dropdown menus that are outside its dimensions.
Remember: common properties that may be hiding an element that you can investigate are usually these: display, visibility, position, z-index, opacity, transform and overflow.
Does anyone have idea why hover effects ends before mouse is moved off an element?
I applied hover effect on before pseudo element.
The :hover selector will complete once you hover over an element. Moving the mouse off of the element will stop/remove the effect. You should post in JSFiddle for more help. That way we can see what's going on.
I've placed an arrow as an :after pseudo-element of a clickable tile. It creates a blind spot that is not clickable despite setting the height/width to 0.
Code here: http://cdpn.io/vpjCg
To see the issue, roll cursor over the tiled link, then over the character in the bottom-right corner.
Is there a CSS attribute or another solution to set the :after element as invisible to the mouse cursor so that the whole area is clickable?
Pseudo elements belong to their parents - if their parent is clickable (button,a) then so will the pseudo element. Likewise with DOM elements, if a DOM element has a click event listener bound, it will be fired when you click directly on the DOM element, or on it's pseudo elements.
EDIT
In addition to my answer, you can make your clicks go "through" an element to hit underlying elements using the CSS property pointer-events and setting the value to none. Works in every modern browser (IE9 and up) https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
I'm trying to figure out where an element's location is being computed, like hovering over the element's line of code in the code window so that the margin, padding, etc, are shown. Is there a way to do this for pseudo-elements?
Edit: What I should say is I want to see something like the metrics, properties, etc window for pseudo-elements :before and :after. All I really want is to see their location on the screen.
Support for before/after elements is coming very soon! You should have it within the next month or so on Canary!
Yes, there is a way to force an elements state using chrome devtools; if you look on the right side you should see an icon that looks like the cursor with a broken box behind it on the 'styles' tab.
When you click on it, it will have a dropdown menu that will allow you to toggle the selected code's hover, active, focus and visited pseudo-classes.
I see in the HTML tab of firebug i can drill down into the html elements of the page and it will highlight those sections on the page.
Is there anyway to do the opposite where i simply highlight over some area on a page and it will point me to that html inside firebug so i can see the html and css that is generating this?
You can right click in the page and choose inspect element. Chrome also features this. In IE 9 you can press ctrl+b with the developer tools window active. The next element you click will jump to the element in DOM explorer.
The blue rectangle at the upperleft corner can be clicked. Then, hover over the page, and click at any element to show the HTML tree and relevant CSS properties.
This feature is useful if you don't know which element has to be inspected, but if you know the rough area of the elements. During the hover, a blue outline will appear around the hovered element.
There's a button with a mouse pointer over a blue rectangle. It allows you to go to the actual site and select something, which makes firebug highlight the relevant section of HTML and the styles related
In firebug, click on the arrow with the box in the upper left. Then click on your item in the page.