We Keep Coding

Register mouseover of an element beneath another one

I'm trying to find a way to register a mouseover event on an element that is beneath another element. I have rows which, when moused over, make a new div appear and positions it on top of the hovered div.
Here's the page: http://www.brunobryan.com/dev/stephanebourgeois/index/
When you mouseover a row, an image appears on the right. I would like to register the mouseover event on the row even when the mouse hovers above the image.

You can permit the cursor to pass-through the image using pointer-events:
#index-hover {
pointer-events: none
}
Note, this isn't supported in all browsers. Better support if you use SVG.

This is not really possible, you have a couple of options for workarounds.
Either a) Register the hover event on a container that will contain both the row and the image.
or
b) Bind the same hover event on the image aswell.

i think the answer here is going to be that your <img> tag needs to be placed inside of the <tr> tag, and then absolutely positioned. you'll probably want to make the row relatively positioned so that you can use the row's position as context.

Preventing hover intent from seeing a mouseleave when moving into an overlaid element

This answer:
cancelling mouseout event when element is overlaid
Gets somewhere near, but isn't really what I am after as it's sort of reversing my problem.
I am making an image gallery similar to the Facebook image viewer.
An image is loaded into an absolutely positioned div which is centred on screen and floats above the main page with a z-index value.
To the left and right of the image are small div elements with absolute positioning and a z-index 1 higher than the image. These div elements are left and right arrows to click through the gallery.
The arrows are hidden when the image loads, but then when the user moves his mouse over the image, the arrows should fade in, then if they move off again, they fade out... just as the Facebook viewer does.
I am using hoverIntent to achieve this, and it works fine.
BUT... when the user moves his/her mouse into the arrow div, hoverIntent sees this as a mouseleave event on the image which is underneath and hides the arrow...
So... what I need is to be able to have hoverIntent ignore the arrow divs.
The code I am using for hoverIntent is quite straight foward:
function showArrows() {
$('.imgNav').fadeIn(500);
};
function hideArrows() {
$('.imgNav').fadeOut(500);
};
$(img).hoverIntent(showArrows, hideArrows);
Obviously img is the jQuery image object and .imgNav is the classname for the arrows.
EDIT:
I have created a fiddle here: http://jsfiddle.net/jhartnoll/cE6gu/

Using your fiddle example, changing
$('.enlarged').hoverIntent(showArrows, hideArrows);
to
$('.imgViewer').hoverIntent(showArrows, hideArrows);
did the trick for me http://jsfiddle.net/cE6gu/4/
Note, on hoverintent website it says its designed to ignore children (here) so you just need to make sure you call hoverintent on a parent element that contains all these divs.

How to create a move handle using jquery

This is more the theoretical type of question.
In my web-application i want to create a button that the user can click and therefore initiate a move-mode during which (until the mouse is released) all the mouse movements are being translated onto a certain DIV.
To better understand what i mean, think of a box in which to show a portion of an image (box is overflow:hidden) - i want to make it possible to move the image around within the box, but not by directly dragging the image, but by dragging a handle instead (a handle that does not move when dragged)
In the optimum case the mouse cursor hides while the drag operation is on.
My basic idea was to use a draggable but i got no clue on how to make it accessible, yet invisible.
How would i accomplish that using javascript/jQuery?

Making the cursor invisible isn't too difficult, see the top two answers on this question.
As for the handle, you could try using jQuery UI Draggable's handle option. The key to making the handle appear stationary is to have a separate element that looks like the handle, and position the real handle (which would be an empty element) on top of it.
You would then position the real handle back where it was, covering the fake handle, when the stop() event is fired.
So, in the start() event, you would add a class to the real handle that makes the cursor invisible (using either of the methods in the post mentioned earlier), and remove that class when the stop() event fires, causing the cursor to reappear.

The easiest approach would probably be to just apply different CSS styles on the click event of the button.
Add a class to your element (on click) for the :hover pseudo-class that has cursor: move; for its style and has cursor: none; for the :active pseudo-class. You could then have these styles removed once the user's mouse left the draggable area.
On click the function might look like this:
$('#myButton').click(function(){
$('#myDraggableElement').addClass('draggable');
});
$('#myDraggableElement').mouseLeave(function(){
$(this).removeClass('draggable');
});
Have I understood the question correctly?

html mouseover event on element border

I am wondering whether it is possible to bind mouseover event to one of the HTML element border, say, the left border of a div.
The div is a container for other complex html elements, and there are mouseover events attached for its sub elements. Binding mouseover event to the whole container div itself is a method, however the user will not be able to distinguish whether he select the container or the sub elements.
I want a very obvious method to indicate that the container can be selected, like highlighting the container when he mouseover the left border area.
Or is there any other good way to solve the problem?
Thank you.

Borders are not elements, and as such you cannot bind mouseenter events to them. If you wanted this type of functionality, you would need to place a series of elements around the edges of the element (or at least next to your target edge), and bind to that.
This particular approach was taken by Dropbox in their web-based upload feature. When you drag a file from your desktop onto their page, you'll notice that div elements around the top, bottom, and sides all fade into view. This was accomplished with four div elements placed near the edges of the viewport.

do you want like this
http://jsfiddle.net/GBpcg/
EDIT : http://jsfiddle.net/GBpcg/2/

How to turn off element CSS background when dragged

I've build a drag and drop interface using JavaScript where users can click and drag a link (that sometimes has a CSS background image) and drop it onto the canvas.
My problem is that the mouse cursor has the link background image beneath it during dragging. I need to add my own cursor design, so is there any way to turn this CSS background off so that it doesn't follow the mouse upon dragging?

have you tried setting :active pseudo class for anchor tags?
http://www.w3schools.com/cssref/sel_active.asp
then if that isn't work quite yet you could use !important after your deceleration possibly?
and example could be
.links:active {
background-image: none !important;
}
when the user releases the background image should return.

The best solution I found for this problem was to use jQuery to assign e.preventDefault() to the click event of the link, thus disabling the background drag effect. Then, if you want a custom cursor upon dragging, write a script to match an absolutely positioned div's (with the image as the background) x,y cords to the mouse position.