Thursday, January 17, 2019
COMPREHENSIVE GUIDE ON H0W TO SET THE MOUSE CURSOR STYLE USING CSS
CSS
,
MOUSE
,
STYLING
No comments
:
In this lesson, I teach you very important secrets behind mouse style whenever it is placed on certain texts on a web page. I will also teach you how to create a custom mouse. Let’s say you want your image to appear whenever the mouse touches a particular text or content on a web page. Never mind, I will dish out the tricks to you free of charge. Let’s get started.
There are a whole lot of values you can possibly set your mouse to, in Cascading Style Sheet apart from using an image. Some of them include
1. Default (i.e arrow shape)
2. Progress
3. Move
4. Not-allowed
5. No-drop
6. Wait
7. Help
8. Text
9. Pointer
10. Crosshair
11. Auto
12. Se-resize
13. Nw-resize
14. Col-resize
15. N-resize, etc.
Whenever you want to set the cursor style to any of these values above, just write cursor:#; (# is where you will put the value name).
Let’s consider an example,
HTML
<span>Example of cursor style for 'not-allowed'</span>
<p>The cursor style will change to ''not-allowed'' when it touches the text above.</p>
CSS
span{
cursor: not-allowed;
}
When you reference the CSS
document in HTML, it will look like this,
SAVE AND OPEN IT, AND PLACE YOUR MOUSE ON THE FIRST SENTENCE, IT WILL LOOK LIKE THIS
show it clearly )
FOR CUSTOM IMAGE
If you want a custom image to appear instead of cursor shapes. Then write the following in your CSS file.
CSS
Span{
Cursor: url(your image url.png),auto;
}
NOTE
The ‘auto’ at the back of the image URL means that if your image is not supported by your web browser, the cursor style will change to auto.
WRAPPING UP
If you have any challenge or question with regard to the above lesson, feel free to use the comment box. We are moving to CSS 3 in our next lesson, Stay practical.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment