元素边框上的html鼠标悬停事件

Question

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.

Answer 1

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.

Answer 2

do you want like this

http://jsfiddle.net/GBpcg/

EDIT : http://jsfiddle.net/GBpcg/2/