Using chromes web inspector to view code is very useful. But how do you view for example the hover code for a button? You will have to hover the mouse over the button and thus cannot use it (mouse) in the inspector. Are there any shortcuts or other ways to accomplish this in the inspector?
Now you can see both the pseudo-class style rules and force them on elements.
To see the rules like :hover in the Styles pane click the small dotted box button in the top right.
To force an element into :hover state, right click it.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
It's a little annoying, but you need to right click on the element, and then, keeping your mouse over the link, use your keyboard select the 'Inspect Element' link and press enter. This should show you the css for the hover pseudo class for the selected element.
Here's hoping they make this a little easier in future builds.
In Chrome:
You can also mouseover on an element, and then click CTRL+SHIFT+C to inspect that element.
In Firefox:
in firebug:
source: https://stackoverflow.com/a/11272205/2165415
I'm not sure that I right understand your question but if you want to see the event handler code you can just inspect the element and look at Event Listeners sidebar pane of Elements Panel.
Another way is just press pause button in Scripts Panel and just hover the element.
The debugger will stop at the first instruction of the first event handler.
Please have a look on below link for answer
See :hover state in Chrome Developer Tools
Related
I have a button which is styled for various states. Particularly, pressed (:hover:active) and focussed (:focus).
But if the button was focussed and is pressed, it changes to :hover in Google Chrome / Safari or :hover:active in Firefox. Neither go to :hover:active:focus as expected.
HTML test case:
<button>Test</button>
CSS:
button{background:#000000;color:#FFFFFF;border:1px solid #000000;padding:10px}
button:hover{background:#FF0000;color:#000000}
button:active{background:#00FF00}
button:hover:active{background:#FFFF00}
button:focus{background:#0000FF}
button:hover:focus{background:#FF00FF}
button:active:focus{background:#00FFFF}
button:hover:active:focus{background:#FFFFFF}
And here it is in a simple test fiddle: http://jsfiddle.net/CtKs8/. Note that after focussing the button using the keyboard (so it goes blue), pressing it makes it go red in Chrome, or yellow in Firefox (instead of white).
My question is: how can I detect a pressed, focussed element (like :hover:active:focus), or at a minimum get Chrome to use the :active:hover state as Firefox does?
I believe that focus, generally as an event, is not fired at all when you click on a button. It is fired when you keep pressing Tab until you reach desired element.
Text input's and textarea's are exceptions, since they're focused when clicked.
I couldn't find clear explanation in events documentation but HERE you can see Focus Event Types documentation. One chapter down there is completely separate chapter Mouse Event Types which suggests that mouse behaviours are not related to focus events.
EDIT:
I read your question carefully once again and now I think I finally understand your problem.
When it comes to a button, there is no such state as :active:hover:focus. If a button is focused it becomes blur immediately after you clik on it (to be precise - after you just mousedown on it). So there's no way to put button both in active and focus states together.
According to the red color on Chrome/Safari when you click on a focused button, I guess this is a bug. If you bind a simple handler to the button click like here you'll see that clicking on a focused button works. I don't know why :active is not triggered.
The top menus at www.petersencreative.com use CSS (and some CSS3) to provide the smooth transitions. My problem is that if you click a link and then mouseoff the link, it starts to descend again. Is there a way to keep it up (fnnnrrr!) once it's been clicked and then mouseoff?
I've looked at using :active but that only for when the mouse is down. :focus only seems to work for keyboard navigation. Am looking at using a bit of jQuery or is there a way to do it using CSS?
Can be done with CSS, using :target selector.
In Google Chrome, the CSS hover state isn't being triggered when the left mouse button is held down, as shown here:
a:hover {
color: red;
}
words
http://jsfiddle.net/RHGG6/1/
This issue doesn't occur in either FF8 or IE9. It's problematic because I'm implementing a drag-and-drop action and using CSS to highlight the drop target. I could do this pretty trivially in JavaScript, but that seems heavy-handed for what is essentially a CSS problem. Are there any workarounds to this?
From a little playing around, it seems that Chrome 30.0.1599.69 m on windows7 doesn't generate a mouseenter event if the left button is held when moving over an element. As such, relying on the onmouseenter event gives the same result as using css - perhaps this (non-triggered) event is used to signal the css engine that something needs to change.
Anyhow, you can just add code to handle mousemove and mouseout events. I simply set the text colour with the js, though something that toggled a class would probably be a better option. At least the js will be using the time that the css should have been using, so it won't all be overhead, although it does suck redoing it all anytime the mouse moves.
Perhaps you could use removeEventListener from inside the handler you're trying to remove. If so, you could attach the js to handle the events with addEventListener, attaching to both events on page load. When the onmousemove event was triggered, you could change the style and then remove the handler. Then, when the mouseout event fired, you could restore the style and re-attach the onmove handler. I wouldn't be surprised if trying to remove a handler from an event, from within the handler itself would fail, but one can only try. It would only add a few bytes to the js, but would improve efficiency (in terms of the link, not the whole page) tremendously - from potentially very poor if the mouse was moved over the link a lot to 100% - i.e the style is set exactly once and cleared exactly once per enter/leave cycle.
words
Works for me - Note: only tested with chrome in win7.
I checked in Safari and Opera as well and they behave just like IE9 and Firefox. It seems Chrome is the only browser that behaves this way. The only way I was able to get the desired behavior was using Javascript. The suggestions with the :active pseudo class definitely don't work, I think they misunderstand the problem. Strangely, :hover in Chrome works when the right mouse button is being held down and not when the left button is. Go figure.
The link turns red when I mouseover it using Chrome 17.0.948.0 (Developer Build 111321) Ubuntu 10.04, so you might want to update your Chrome.
On a related note, the :hover pseudo-class applies to an element being HOVERED by a mouse pointer. For a style to apply while the mouse button is held down while clicking the link, use the :active pseudo-class. I'm not sure why FF and IE behave differently.
When you're left mouse button is down, isn't the element supposed to be in the active state? The difference here is that Firefox and IE are allowing the active state to be inherited from the hover state, and Chrome is not. In CSS, the active state can be controlled using the :active pseudo-class. You need to explicitly set the style for the active state to ensure consistency between browsers.
Nowadays (2018), while the bug still persists in Chrome, you can work around it using HTML5 drag&drop's dragenter and dragleave events. If you have a nested dom-element you can apply a counter to mitigate the dragleave events that occur when the mouse gets over a child element.
var h1 = document.querySelector('h1')
var counter = 0
h1.ondragenter = _=> ++counter && h1.classList.add('dragover')
h1.ondragleave = _=> --counter || h1.classList.remove('dragover')
span { font-style:italic }
h1:hover { color:red }
h1.dragover { color:blue }
<h1>hover over me<span>, and me</span></h1>
<h2 draggable=true>drag me</h2>
You're looking for the :active pseudo-class. :hover will only activate when the node is being hovered over by the mouse. :active will only trigger when the node has been selected or clicked on.
Here's the jsFiddle: http://jsfiddle.net/RHGG6/21/
We supply micro-site content to a client. They supply us with a HTML wrapper and we inject our content into it. I'm trying to debug an issue where our style sheet appears to be interfering with the style in their wrapper.
Normally I'd use firebug or IE Developer Toolbar to select the element and I can see which styles are being applied, which are being overridden and where they are coming from. But this particular problem only exists when I hover the mouse over a link. Specifically, the link shrinks a little bit.
Is there anything that I can use to see what the browser is doing with the styles when I hover the mouse over the link?
Right click on the element. Select 'inspect element'. In the firebug html window click on the tag you're interested in. Hover over the element in page. You should see the style change to e.g a:hover
I want to debug the CSS for a DHTML menu, but the element I want to debug is a submenu, so it only appears when the top element in the menu is clicked.
So I can't use that button on Firebug that shows the CSS for the next element clicked, because when I click on the top menu item it will show the CSS for that element, not its child, and if I expand the menu first and then click on the Firebug button the submenu disappears (it disappears when it loses focus).
Any tips on how to get out of this catch-22?
Use firebug console command line to run click event. Like $('#menutab a').click(); If it's needed, you could also set breakpoint to avoid hidding.
Read more in firebug documentation
Select your element in the HTML tab, directly in the source.
Then, you can hover your page to toggle it.
In cases like this I sometimes alter the script slightly in order for the 'hidden' element to stay visible.
In this case, I would perhaps comment out/disable the script code which hides the element on blur. That way you can click the main element, and inspect the now visible item for as long as needed.
What about debuging with all the buttons visible? Or you can still find the elemnt in the HTML tree.
In Opera, you can use Dragonfly (Tools > Advanced > Developer Tools, or Ctrl+Shift+i) to solve this issue. When the tools are active, clicking on any part of the page will navigate to that section of the HTML side-by-side with its CSS.