Develop Reference

Change cursor based on background image color

I am using Vue 2, on the html I have an image which has white background, with a colorful object on the middle. Is it possible to detect and change the mouse cursor, based on the background color of where the mouse cursor is? Like, when on the white parts, against the actual object image (anything not-white).
Let's say it's an image like this. I want the cursor to change to pointer anywhere on the image where the background is not white.
https://www.vecteezy.com/vector-art/2751371-apple-with-a-white-background
Note: JQuery is not an option on this project
Thanks.

You can't check the color that the mouse touches, but you can just use a css rule to set the cursor for a specific element, as used the example you linked.
img {
cursor: zoom-in;
}
See more info on mdn

JS. Non-standard overlay over table

I have visual selection for table which colorize mouse overed table cell and it row and column, like some crosshar.
see JSFiddle:
http:// jsfiddle.net/arhangelsoft/0ardb3u0/40/
But I'm need JS automated and animated movement with effects(like easing), like from 0,0 crosshair smooth moves to 55 cell, after that the same smooth moves to 22 cell and etc.
I thinking, how to do that.
Currently I have an idea:
Create absolute div for row(u see it in blue color), columns and target cell.
After that move theese elemets together in animate funtion from x point to y point.
Is there more simply method/idea to do it?
The similar example of result what I want get via JavaScript you can dewnload here(GIF picture, big(2 mb) ):
download and see
sorry, I can't make it smaller.

Here you go: http://jsfiddle.net/andunai/0ardb3u0/41/
(I've commented out all your code as a reference, the new code is at the bottom of fiddle.)
You are right: the approach here is to actually create 2 absolute divs and to move them according to hovered cell.
For the animation we can use CSS transition property here:
transition: all 0.1s linear
...so that when we do $(...).css(...) changing its width, height, top and bottom, properties are transitioned smoothly from old value to new one.
You can still use jQuery's $.animate() method for the animation, but CSS transitions are basically much more faster and smoother.
Also, note that I've used $(...).outerWidth(...) instead of width(...) to properly resize cells.
One more thing: note this CSS line -
pointer-events: none;
It is very important because it makes the crosshair divs 'transparent' for mouse events, meaning actual clicks will go "through" them and will be captured by appropriate td element.
Enjoy!

Get all elements below a specific element

In JavaScript, is it possible to obtain a list of all elements that an element is hovering over? I'm using an element as a cursor, and I want the other elements in the page to be underlined when the cursor element is hovering over each of the other elements.
<div id="cursor">|----------|<br/>|----------|<br/>>I'm a spaceship!><br/>|----------|<br/>|----------|<br/></div>
<div id="hi">Try to select this text</div>
<p>I want to automatically highlight all elements that the cursor element hovers over.</p>
<p>Here's an element.<p>
http://jsfiddle.net/fU3Qn/

The :hover pseudo-class applies to whatever you're cursor is over. Have a quick look at this fiddle where your mouse triggers a red background for each element hovered: http://goo.gl/zurP6
Secondly, if you are using an element as your cursor, you can instruct your mouse to pass through it by using the pointer-events: none rule. Note, support outside of SVG for this property is limited.
Other than this, the only alternative way is to use something like elementFromPoint, but this will return only a single element. I'm not sure this would even work for you since you're mouse is always obstructed by an element to begin with.
Regarding the elementFromPoint route, you could temporarily hide your custom cursor to get the next element below the mouse, and then turn your custom cursor back on, as suggested in the comments below.

Rollover Image to Text with Transparent Background

I haven't worked much with Javascript, but I have a rough idea of how to make an image rollover to another image. I'm trying to make an image that, when moused over, will become a transparent background to a block of text that will occupy the space the image occupied. I've seen lots of tutorials but nothing matching quite that.
Also: is there any way to format this text with css or otherwise? (Like adding padding, line breaks, etc.)
Any help or links to a site where I can figure it out would be greatly appreciated! Thanks!

This fiddle is a pure css implementation that changes the opacity of an image placed in front of the text on hover. To do this I used put the text and image containers both within a container div and set position: absolute so that they overlap. I then change the opacity of the image by using the :hover selector. Since the text is behind the image, it can't be selected. Let me know if this what your looking for, and specify what you would like differently if it isn't :)

If you want the text to stay after the mouseover, you could use javascript to toggle a class on the rollover and add some text. E.g., put an image as the background to a div with some class (e.g., class="solid-image"). When you want to change the element, just change the class (e.g., with myElement.className="translucent-image") and then you can either have text that was previously invisible or you can add text to the div (so long as it doesn't have children) by using the textContent or innerText element. E.g.:
text = "textContent" in document ? "textContent" : "innerText";
myDomElement[text] = "My text here";
And then add an event listener for the appropriate events.

How to position a hover div based on the position of the element

Please see the following jsfiddle: http://jsfiddle.net/bhellman1/Na3hd/11/
Right now when you move over the box, the hoverbox appears in the same place for all items.
What I would like to do is position the hover box based on which #box.corner you are moused over. If the #box.corner is to the left of the box, I'd like the hover box in the left, outside the box, centered to the corner.... If you mouse over a #box.corner that's in the bottom right, I'd like the hover box to show at the bottom right, centered to the corner.
Any ideas on how to accomplish this?
Thanks

If I read your question correctly, this should be what youre looking for: http://jsfiddle.net/Na3hd/17/
As you can see i moved around some of the css to match what different elements have in common more, so that the code can easily be reused and assigned to other elements. I moved the defining of the hoverbox into the mouseenter function, so that a new div gets created on each mouseenter, which will then not result in complication when setting the positions.
Hope this helps!
EDIT
Here a more dynamic approach: http://jsfiddle.net/Na3hd/22/
Also, i just realized you wanted to have these items show up outside of the boxes.