CODEWITHSUNDEEP
javascriptjquerycursor
Oijl
Oijl

Reputation: 35

jQuery - text following cursor

I know: Practically no javascript Basic HTML and CSS

So - my goal: Have a short line of text follow the cursor when and only when the cursor is over a div or image. When the cursor is not over the div or image, I do not want the text to be seen anywhere.

I found something similar on a jsFiddle page, and I have made from it the following .html and .css files:

.html file:

<!DOCTYPE html>
<html>
<head>

<link href="css/lern.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(function(){
    $(index.html).bind('mousemove', function(e){
        $('#tail').css({
           left:  e.pageX + 5,
           top:   e.pageY - 20
        });
    });​
});
</script>

</head>

<body>



<div id="tail">
    <p>Farewell</p>
    <p>N.C. Hunter Hayden</p>
</div>​


</body>
</html>

.css file:

@charset "UTF-8";
/* CSS Document */

#tail
{
position: absolute;
}

This is the output:

​ Farewell

N.C. Hunter Hayden

If anyone wants to take the time to patiently explain to such a green man as me, it would be appreciated much. If you have better things to do, I totally understand. So many things to do in a day, ya know what I mean?

I think I've given all the information I have, but if you need more, just ask.

Anyway, thanks anyway for at least deigning to read this far. You're awesome. Keep it up!

Have a great day. And have a pretty good one tomorrow, too, in case I don't get a another change to tell you.

-Oijl

Upvotes: 0

Views: 6271

Answers (1)

Purag
Purag

Reputation: 17061

Just change index.html to document.

You don't want to select the document by its filename, but by its actual selector.

Here it is in action.

Upvotes: 2

Related Questions