It is possible to make cursor area larger ? I am playing with hover event and i am wondering if it's possible to make the cursor "trigger" area larger.
When the invisible div touches my elemet i want to trigger hover event. Is this possible?
ps: the invisible div follows the mouse.
Then just apply the padding value for that element with higher value as you wish.
Or, if you wished to trigger the hover event after hovering some div, do like this:
$('.invDiv').hover(function(){
$('.hovDiv').trigger('hover');
});
And your invisible div should not be hidden but instead use blank div and apply width and height for that area...
Related
So I have a canvas with a mouse hover animation on it and above that an overlay which contains a menu. what I want to achieve is to pass on the mouse hover event to the canvas even while I am hovering on the menu.
right now I have it working partly,
I have currently solved this problem partly by using CSS property pointer-events: none in the div containing the menu and auto in the clickable list menu elements but while hovering over the menu, the lower canvas doesn't detect the mouse as it has its focus on the menu list child which is set to auto in the mouse pointer events.
How can I allow the above menu to remain clickable while passing on the hover event to the lower canvas?
Using JQuery you can say that if you hover over either element then do "something" :
$('.canvasClassName, .menuClassName').mouseover(function () { /*Canvas Action*/ });
Where canvas/menu ClassName would be a class of the object. (Using other properties like id is also valid using a # instead of a period)
The hover effect will work if you hover over the canvas or the menu while maintaining the menu's useability.
I have a draggable div which is initially positioned over a blue header so has a white background with blue text and white border so it stands out.
When it is dragged over the rest of the page which has a white background I would like the background to become blue, text white and border blue.
The draggable div is positioned using absolute so is actually placed outside of the header element so it would need to detect what area of the page it is over.
Can this be done using CSS or Javascript / jQuery?
In JQuery I imagine you could catch the mouseOver event (https://api.jquery.com/mouseover/) and when it is triggered you would see with some check if there is a simulataneous drag happening meanwhile and if it is happening, change the colors of the element where the mouseOver event took place.
important parts of code:
HTML:
<div draggable="true" class="bar">Drag me!</div>
<div id="foo"><p>To be dragged over.</div>
JQuery: At mouseOver see if another element is dragged on the moment:
$( '#foo' ).mouseover(function() {
if ($('.bar').is('.ui-draggable-dragging')) { return; // change color in here. }
});
NOTE: You have to have this attached by id, at least I couldn't imagine how you otherwise apply color change to correct element. Color change can be a function, though, and take in element.
I have a div that is absolutely positioned above other absolutely positioned divs and I want the divs below the have both mouseover, mouseout and click events and the top div to have click events also.
The only way I've been able to get mouse events on the divs below is to add pointer-events: none to the above div but then the above div does not get click events when that css property is present.
Here is a codepen showing the problem
http://codepen.io/Wryte/pen/qsEBp
#Wryte AH! ok, there is a problem with what you are trying to accomplish. The shade is not a container as a layer over the whole outer div that covers the rest of the inner DIVs. Since the shade div is not in the chain for event bubbling it won't get called or if you catch events on the shade DIV you won't get the events triggered on the inner DIVs.
What you can do, is to darken the outer DIV and add transparency to the inner DIVs. Why do you need to track events on the shade DIV by the way?
I have a hover event set on an element that use's jQuery UI's position function to show a div right underneath it, with the "out" set to hide that div.
The problem is, subsequent hovers position that div further and further on each hover.
Example: http://jsfiddle.net/Shpigford/8ZkgJ/
Hover over the red box, then hover over it again and you'll see the blue box quickly get positioned further and further to the right.
Same thing happens if I change to a click event. Seems like something odd is happening with positioning when I hide the div and then try to show it again.
Instead of position({...}).show(), use show().position({...}). The reason is that positon won't work when the element is invisible. You can find the following note at http://api.jqueryui.com/position/:
jQuery UI does not support positioning hidden elements
Looking at this layout, I want to use jQuery/Javascript to put the Red Box, in the Gray Container under the left small Blue Box whether zooming in or out with any browser.
I am trying to accomplish this by NOT putting the redbox #badplacement div inside the Gray Container's #outerwrapper div. Any idea how this can be accomplished?
(To start, I change the #badplacement css left to 243px, on normal browser zoom level, where it is under the small blue box.)
Fiddle: http://jsfiddle.net/Q56up/
Clone the outerwrapper div with css rules but without background and place it over the original (position:absolute, z-index:1). Put Red Box inside and position it relative.