Html style hover cursor

Introduction

Having a nice design on your website will wow and hook your user into staying on it, one small but popular way of doing that is with a custom cursor. So i’ll show you the simplest way to do this with CSS and Javascript. We’ll make a circular cursor, but you can also make cursors with different shapes and sizes using svg’s, images, or div’s! We’ll also make cursor trails and hover effects. As an example, check out this codepen! If you hover on the text the cursor turns cyan, hover on the custom cursor heading and it becomes a gradient color, hover on the image the cursor becomes clear, but hover on the menu icon and it’ll become a rotating square!

Creating the cursor

You can make your cursor an svg or an image, but for now we’ll make a div. We’ll make it a small circle by setting the width and height to 15px and the border-radius set to 50% . Then we set the background-color to a dark color like black so it can be noticable on the bright page. We also need to set the pointer-events to none so the hover effects that we put can work.

HTML

CSS

.cursor  /*The position is fixed so it can stay on screen even when scrolling*/ position: fixed; width: 15px; height: 15px; border-radius: 50%; background-color: black; /*To put it on the center of the cursor*/ transform: translate(-50%, -50%); transition: width 0.3s, height 0.3s; /* So the JS can work properly*/ pointer-events: none; > 

Tracking the cursor

Now for the javascript, we’ll get the cursor div by catching it with document.querySelector to put it in a variable. Next we give it a mousemove event listener with a function that has the paremeter e .

Now for the important part, in the function, we’ll make two variables that have the mouse event properties clientX and clientY. These properties are used to track the Y and X coordinates of the cursor. Now we set the custom cursor’s top and left location to the X and Y coordinates of the cursor. By doing this the div cursor will always be exactly where the actual cursor is no matter what. We then set the illusion of the div cursor being the real cursor by setting the website’s CSS cursor property to none .

Then there you have it! That’s how you make your own cursor. You can use the same JS for an svg or an image.

JS

var cursor = document.getElementById('cursor'); document.addEventListener('mousemove', moveCursor) function moveCursor(e)  var x = e.clientX; var y = e.clientY; cursor.style.left = `$x>px`; cursor.style.top = `$y>px`; > 

CSS

*  cursor: none; /*It is now invisible!*/ > 

Источник

How to Change Cursor on Hover in CSS

Almost all the websites are changing the cursors for better user experience or just for fun. Customizing cursors is an easy way to add an extra flourish to your site when needed.

To specify the cursor appearance, use the CSS cursor property, which is used to change the mouse cursor type on elements. It can be useful in websites where different actions should be done rather than just clicking.

We will cover the following ways for managing cursor usability:

How to Make the Cursor a Hand when the User Hovers over a List Item

Now let’s see an example of changing a mouse pointer into a hand pointer by using the «pointer» value of the cursor property. We set that cursor type only on the «pointer» class.

Example of changing a mouse pointer into a hand pointer:

html> html> head> title>Title of the document title> style> li < margin-bottom: 15px; > li.pointer < cursor: pointer; > li:hover < background-color: #ccc; > style> head> body> h4>Hover over the list items to see how the default cursor changes into a pointer: h4> ul> li>List item 1 with the default cursor. li> li class="pointer">List item 2 with the pointer cursor. li> li>Another list item with the default mouse cursor. li> ul> body> html>

Result

Hover over the list items to see how the default cursor changes into a pointer:

• List item 1 with the default cursor.
• List item 2 with the pointer cursor.
• Another list item with the default mouse cursor.

In the next example, the :nth-child selector is used. Here, we use nth-child(odd) for cursor: progress; and nth-child(even) for cursor: pointer; to have separate cursor types on different list items.

Example of using the pointer and progress cursors:

html> html> head> title>Title of the document title> style> li:nth-child(odd) < background: #1c87c9; cursor: progress; width: 50%; padding: 5px; > li:nth-child(even) < background: #ccc; cursor: pointer; width: 50%; padding: 5px; > style> head> body> p>Hover over the list items to see how the cursor changes: p> ul> li>List item 1 li> li>List item 2 li> li>List item 3 li> li>List item 4 li> li>List item 5 li> li>List item 6 li> li>List item 7 li> ul> body> html>

How to Change the Cursor of Hyperlink while Hovering

The default cursor for a hyperlink is «pointer». To change it, you need to specify the cursor type for your element with the CSS :hover selector. In our example, we style only the «link» class.

Example of changing the “pointer” to “default”:

html> html> head> title>Title of the document title> style> .link:hover < cursor: default; > style> head> body> h4> Hover over the hyperlink to see how the "pointer" changes to "default": h4> p> a href="https://www.w3docs.com">W3docs a> link with the initial "pointer" type. p> p> a class="link" href="https://www.w3docs.com">W3docs a> link with the changed "default" cursor type. p> body> html>

As links have a blue color and underline by default, we suggest to change link colors and go further with hyperlinks.

Example of using the «grab» cursor type on the hyperlink:

html> html> head> title>Title of the document title> style> a < cursor: grab; > style> head> body> a href="https://www.w3docs.com/" aria-label="w3docs homepage"> img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" /> a> body> html>

How to Have Custom Cursor Image Effect on the Element

Let’s do more fun with cursors! It’s possible to add an image as a cursor on your webpage. You just need to add your image by specifying its URL as a value of the cursor property.

Remember to set the cursor type to show when the browser can’t use the provided image. Otherwise, your code will not work.

This is a funny trick to add to your website when users don’t expect to see such things. Imagine you have a form where the answer corresponds to a specific emotion, here is the ideal place to use emoji images.

Example of adding an image as a cursor:

html> html> head> title>Title of the document title> style> body < background: #eee; text-align: center; > button < display: inline-block; background-color: #1c87c9; color: #eee; margin: 25px; position: relative; width: 140px; height: 45px; border-radius: 3px; border: none; font-size: 1.5em; text-align: center; text-decoration: none; box-shadow: 0 2px 8px 0 #999; > button:hover < background-color: #999; color: #ffcc00; > #happy < cursor: url("/uploads/media/default/0001/02/ee4486d1b3fc998e444c3b0100c73db282760eb5.png"), auto; > #sad < cursor: url("/uploads/media/default/0001/02/38cb87a27305100311d9c96e5a5ebb88f04d8034.png"), auto; > #love < cursor: url("/uploads/media/default/0001/02/4be757cf6e9ffc865861649ca423654484ad3dc1.png"), auto; > style> head> body> h2>What is your impression of our website? h2> button id="happy">Happy button> button id="sad">Sad button> button id="love">Love button> body> html>

Example of using icons as a cursor:

html> html> head> title>Title of the document title> style> body < width: 600px; margin: 0.5em auto; > img < width: 280px; height: 186px; margin: 5px; display: inline-block; background-position: 50% 50%; > .dog < cursor: url("/uploads/media/default/0001/02/53f34c2d574ce31a424df7855ef3e8f2ece589d6.png"), auto; > .cactus < cursor: url("/uploads/media/default/0001/02/ea8020fd3fdb96affa77c8164f80d88f8c419e0f.png"), auto; > .nature < cursor: url("/uploads/media/default/0001/02/edcafd9e202ae5f2ae6ae839d21d1d642b2ace00.png"), auto; > .house < cursor: url("/uploads/media/default/0001/02/bb6f118f3b06838624b4297992457093f40fd92b.png"), auto; > style> head> body> img class="cactus" src="/uploads/media/default/0001/02/fc16e475b5cefcbe57924b1a4a3b3e38e936b77c.png" alt="cactus"> img class="nature" src="/uploads/media/default/0001/02/2a85e41725d19aeae7066836accaababd42e638d.png" alt="nature"> img class="dog" src="/uploads/media/default/0001/02/23df99002f94be0d1ca915058e2216c756be155e.png" alt="dog"> img class="house" src="/uploads/media/default/0001/02/1492763b186dabd60c4fbad49ce6d4ba3925b712.png" alt="house"> body> html>

You can also use icons from websites where the Base64 code is provided just pasting the Base64 code in the cursor’s URL value. Or download the icon to your website and use the URL for setting the cursor.

All Cursor Types Example

Here see an example, which contains all the possible types that a cursor can have.

Example of using all cursor types:

html> html> head> title>Title of the document title> style> body < text-align: center; font-family: Roboto, Helvetica, Arial, sans-serif; > .cursor < display: flex; flex-wrap: wrap; > .cursor > div < flex: 120px; padding: 10px 2px; white-space: nowrap; border: 1px solid #666; border-radius: 5px; margin: 0 5px 5px 0; > .cursor > div:hover < background: #1c87c9; > .auto < cursor: auto; > .default < cursor: default; > .none < cursor: none; > .context-menu < cursor: context-menu; > .help < cursor: help; > .pointer < cursor: pointer; > .progress < cursor: progress; > .wait < cursor: wait; > .cell < cursor: cell; > .crosshair < cursor: crosshair; > .text < cursor: text; > .vertical-text < cursor: vertical-text; > .alias < cursor: alias; > .copy < cursor: copy; > .move < cursor: move; > .no-drop < cursor: no-drop; > .not-allowed < cursor: not-allowed; > .all-scroll < cursor: all-scroll; > .col-resize < cursor: col-resize; > .row-resize < cursor: row-resize; > .n-resize < cursor: n-resize; > .e-resize < cursor: e-resize; > .s-resize < cursor: s-resize; > .w-resize < cursor: w-resize; > .ns-resize < cursor: ns-resize; > .ew-resize < cursor: ew-resize; > .ne-resize < cursor: ne-resize; > .nw-resize < cursor: nw-resize; > .se-resize < cursor: se-resize; > .sw-resize < cursor: sw-resize; > .nesw-resize < cursor: nesw-resize; > .nwse-resize < cursor: nwse-resize; > .grab < cursor: -webkit-grab; cursor: grab; > .grabbing < cursor: -webkit-grabbing; cursor: grabbing; > .zoom-in < cursor: -webkit-zoom-in; cursor: zoom-in; > .zoom-out < cursor: -webkit-zoom-out; cursor: zoom-out; > style> head> body> h2>Cursor property example h2> p> Hover the mouse cursor over the element to see the changes: p> div class="cursor"> div class="auto">auto div> div class="default">default div> div class="none">none div> div class="context-menu">context-menu div> div class="help">help div> div class="pointer">pointer div> div class="progress">progress div> div class="wait">wait div> div class="cell">cell div> div class="crosshair">crosshair div> div class="text">text div> div class="vertical-text">vertical-text div> div class="alias">alias div> div class="copy">copy div> div class="move">move div> div class="no-drop">no-drop div> div class="not-allowed">not-allowed div> div class="all-scroll">all-scroll div> div class="col-resize">col-resize div> div class="row-resize">row-resize div> div class="n-resize">n-resize div> div class="s-resize">s-resize div> div class="e-resize">e-resize div> div class="w-resize">w-resize div> div class="ns-resize">ns-resize div> div class="ew-resize">ew-resize div> div class="ne-resize">ne-resize div> div class="nw-resize">nw-resize div> div class="se-resize">se-resize div> div class="sw-resize">sw-resize div> div class="nesw-resize">nesw-resize div> div class="nwse-resize">nwse-resize div> div class="grab">grab div> div class="grabbing">grabbing div> div class="zoom-in">zoom-in div> div class="zoom-out">zoom-out div> div> body> html>

Источник