See this JSFiddle for a bug demonstration. I will also provide an explanation below for convenience.
This is an example snippet in which the bug can be reproduced (Chrome only).
div{
width:100px;
height:100px;
display:inline-block;
}
#testing{
background-color:blue;
cursor:-moz-grab;
cursor:-webkit-grab;
cursor:grab;
}
#testing:active{
cursor:-moz-grabbing;
cursor:-webkit-grabbing;
cursor:grabbing;
}
#testing2{
background-color:green;
}
#testing2:active{
background-color:yellow;
}
<div id='testing'></div>
<div id='testing2'></div>
TO REPRODUCE:
1) Run snippet. Hover over the BLUE box, then click and drag. It should be working as intended (cursor should change to hand on hover, then to dragging hand on click and drag).
2) Open the console. (ctrl+shift+i)
3) Switch to a new tab.
4) Switch back to this tab.
5) Now try dragging the BLUE box.
It would appear (on my device, at least), that the behavior changes; it only changes to a dragging cursor after the mouse goes up, and as soon as the mouse is moved even the slightest bit, it goes back to the original hand cursor.
The bug goes away as soon as
6) You close the console.
Notice that clicking and dragging on the GREEN box (which will change to yellow when clicked) works as intended even after switching tabs with the console open. This leads me to believe that the bug is cursor-related.
Yes, I know this is a minor bug; however, it caused me about a half hour of frustration because I keep my console open as I work. It wasn't until I restarted chrome that it starting work right again, and I was able to trace it down to the console.
BUG SUMMARY:
In Chrome, elements which change cursors on active will behave improperly when the console is open and the user switches tabs.
Can anyone reproduce this bug/explain why this might be happening?
I want to remove focus and selection on a textfield, if the user types ESC or ENTER, or focuses somewhere else. Thus I do this:
stage.focus = null;
textField.type = TextFieldType.DYNAMIC;
textField.selectable = false;
textField.mouseEnabled = false;
The problem is that, if the mouse is over the editable text field, the mouse is in IBEAM mode (caret cursor) and remains in IBEAM mode, even after the commands above, untill I slightly move the mouse, at which point it returns to the AUTO state.
I want to force the mouse to update itself and satisfy the AUTO state but no matter how much I try to make sure the textfield is disabled, it won't dissapear on its own, only after I move the mouse a bit.
Simplest answer from your comment:
So I was fidling with your suggestion and for the luls, used Mouse.hide() and then Mouse.show() and it worked. Removed the hide() and it works just with Mouse.show()! Guess it refreshes the mouse cursor. No blink, works perfectly <3
My original answer:
This is sort of a workaround but shouldn't be too difficult to implement. Hopefully someone comes along with a native API solution.
Run your code you posted
Then make cursor invisible
Then place your custom cursor at the mouse position (optional if you don't mind the cursor just disappearing)
On MouseEvent.MOUSE_MOVE remove your custom cursor, and make the cursor visible again.
I doubt you need me to write this code for you, but if you think this method would work for you, and you have a problem implementing this technique, let me know.
If you're worried about different systems having different mouse icons and then suddenly getting your custom one for a split second, the easy solution there is to just always use your custom cursor. You can design it to look exactly as you like; either mimic Windows OS or make it unique.
I have an element that fires some javascript on click.
Partially covering the element is a mostly-transparent graphic, which passes all events to that element. This way, regardless of if the overlay or the element is clicked, the element gets the events.
I'm trying to write a test in selenium that clicks the element under test and verifies the behavior, however the chrome webdriver tells me it can't click the element because the overlay will get the click event.
That is fine, though... How do I tell selenium that I don't care, to click anyways? I don't want to specifically click the overlay (in this test), the overlay is just eye-candy so the test should still work even if I remove the overlay.
edit:
To make clear... I want it to click in wherever it would have, if the overlay wasn't there. this way it'll click the element if there is no overlay, but click the overlay if covered.
You will not be able to click on the object under the overlay as Selenium has been written to only access what a user can access. If a manual user cannot click through then neither can Selenium.
You could either fire JavaScript directly on that object via the javascript_executor method, or alternatively, perform the interaction which will remove the overlay in your test
I could resolve this issue: In my application top header was visible and i clicked on one of the top elements (which was visible) and could continue with rest of the script execution
I solved this issue by clicking the coordinates of the close button.
Check out this answer. I showed how to click on the little "x" there, without needing to know the name of the actual button. Sometimes its easier to find the class of the image, for example.
Worst case, find the closest element to the button and change the last method to move_to_element_with_offset(element,x, y) to go from the element you found to the coordinates of the button on screen.
Once you do that, the overlay disappears and you can click as normal.
Note: I've read similar threads, but none quite my issue - I can right click on it fine, it just then disappears.
I find 'Inspect Element' an invaluable tool in Chrome, however I'm having trouble using it for sub-menu for an element on my nav bar, which pops up below on hover of its parent item.
The popup (or down) isn't quite styled how I'd like, so I right-click > inspect element to see what's coming from where exactly, and get a better idea of how to achieve my desired effect.
However, as soon as I move my mouse away from the menu, it's gone; thus I can't select different elements in the inspection pane, and see which area is highlighted at the same time.
Is there a way around this, without changing the menu, so that it stays 'popped up' once activated?
If the hover element is triggered by JS (if triggered by CSS :hover, see gmo's answer), you can inspect it if you pause script execution. This is a much simpler way of freezing the DOM than the other answers suggest. You can pause script execution without losing the hover element as follows:
1. Via a keyboard shortcut
Here's how you do it in Chrome. I'm sure Firefox has an equivalent procedure:
Open up Developer Tools and go to Sources.
Note the shortcut to pause script execution—F8 (there may also be another depending on your OS).
Interact with the UI to get the element to appear.
Hit F8.
Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.
2. Via a delayed debugger statement
Some web pages attach keydown / keypress / keyup event listeners which interfere with the shortcut above. In those cases, you can pause script execution by triggering a debugger statement while the hover is open:
Open the JS console, and enter:
// Pause script execution in 5 seconds
setTimeout(() => { debugger; }, 5000)
Trigger the hover and wait for the debugger statement to execute.
If the hover effect is given with CSS then yes, I normally use two options to get this:
One, to see the hover effect when the mouse leave the hover area:
Open the inspector in docked window and increase the width until reach your HTML element, then right click and the popup menu must be over the inspector zone... then when you move the mouse over the inspector view, the hover effect keep activated in the document.
Two, to keep the hover effect even if the mouse is not over the HTML element, open the inspector, go to Styles TAB and click in the upper right icon that says Toggle Element State...(dotted rectangle with an arrow) There you can manually activate the Hover Event (among others) with the checkbox provided.
If it's not clear at all, let me know and I can add a few screenshots.
Edited: screenshot added.
And finally and as I say at the begining, I only be able to do this if the hover is set with CSS:HOVER... when you control the hover state with jQuery.onMouseOver for example, only works (sometimes), the method One.
Hope it helps.
What worked for me is selecting the specific a tag I wanted to inspect and configure it to break on attribute modification:
After doing the above, I would again normally select that a tag then the dropdown will automatically stay as-is even when I mouseover to other places like Inspect Element, etc.
You can just refresh the browser when doing inspecting the menu dropdown elements to go back to normal state.
Hope this helps. :)
You can also do this in the javascript console:
$('#foo').trigger('mouseover');
An that will "freeze" the element in the "hover" state.
Here's how I do it with no CSS changes or JS pausing in Chrome (I am on a Mac and do not have a PC in front of me if you are running on Win):
have your developer console open.
do not enable the hover inspection tool yet, but instead open up your desired sub menu by moving your mouse over it.
hit Command+Shift+C (Mac) or Ctrl+Shift+C (Win/Linux)
now the hover inspection tool will apply to the elements you have opened in your sub-nav.
Open Inspect element
Now go to elements now on right side and select hover
It will show all hover effects
Not sure if it was present in previous browser revisions, but I just found out this extremely simple method.
Open the inspector in chrome or Firefox, right click on the element you are interested in, and select the appropriate option (in this case: hover).
This will trigger the associated CSS.
Screenshots from Firefox 55 and chromium 61.
I needed to do this, but the element I was trying to inspect was added and removed dynamically based on hover state of another element. My solution is similar to this one, but that didn't quite work for me.
So here's what I did:
Add simple script to enter debugger mode upon mouseover of the element that triggers the hover event you're concerned about.
$(document).on('mouseover', '[your-hover-element-selector]', function(e) {
debugger;
});
Then, with the dev console open in Chrome, hover over your element, and you will enter debugger mode. Navigate over to the sources section of the dev tools, and click the "Resume script execution" button (the blue play-like button below).
Once you do that, your DOM will be paused in the hover state, and you can use the element inspector to inspect all the elements as they exist in that state.
I found a very simple way to do this if for some reason you have problems with script pausing:
Open Dev Tools on "inspect"-tab.Hover to make the pop-up appear.Right-click on the desired element in your pop-up and press 'Q' (in Firefox) to inspect that element.Use keyboard to navigate: Arrow Up/Down: Move between elementsArrow Left/Right: Collapse/ExpandTab/Shift+Tab: Move between inspector and CSS rules and inside CSS RulesEnter: Edit CSS Rule
Excellent stuff!
Thank you to gmo for that advice. I did not know about those attribute settings massively helpful.
As a small revision to the wording I would explain that process as follows:
Right Click on the element you would like to style
Open 'Inspect' tool
On right hand side, navigate to the small Styles tab
Found above CSS stylesheet contents
Select the .hov option - This will give you all the settings
available for the selected HTML element
Click and Change all options to be inactive
Now Select the state that you would like to tweak - On activation of any of these, your Stylesheet will jump you directly to those settings:
Styles - Tweaking Filters - Interactive elements
This information was a lifesaver for me, cannot believe I have just heard about it!
Change the CSS so that the property which hides the menu isn't applied while you work on it is what I do.
I'm trying to use the Chrome speech input control. Basic operation is no problem, but I cannot get an event to fire after some speech is entered. Probably something stupid, but I can't see it.
Here's the html:
<input type="text" speech="speech" x-webkit-speech="x-webkit-speech"
x-webkit-grammar="builtin:translate" id="inbNote"/>
I tried adding inline event handlers, to no avail. Then I tried a jQuery bind:
$('#inbNote').bind("onwebkitspeechchange", function(){alert($('#inbNote').val())});
I also tried "onspeechchange" as the event name. Neither does anything, as far as I can tell.
Also, everytime I click the microphone the little "speak now" bubble pops up. When I stop speaking, the contents of the bubble disappear, but the bubble itself remains displayed and on top. It will not close until I close Chrome completely. If I enter multiple speech inputs, I get multiple bubbles. Do I have some Chrome config problem? I'm using 18.0.1025.1 dev-m.
You must use 'webkitspeechchange' not 'onwebkitspeechchange':
So, it would be:
$('#inbNote').bind("webkitspeechchange", function(){alert($('#inbNote').val())});
Good luck!
Don't worry, the problem is not on your side.
The same happens on www.google.com, must be a bug in Chrome.