Tips for making the cursor invisible when only the background is visible

I am trying to hide the cursor when only the background is displayed in HTML/CSS, but unfortunately, it is not working as expected and the cursor still appears over the background.

Here is my code:

body {
  background: url('https://miro.medium.com/max/10368/1*o8tTGo3vsocTKnCUyz0wHA.jpeg') #000000 top left no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  vertical-align: top;
  text-align: center;
  z-index: -1;
  margin: 0;
  padding: 0;
  cursor: none
}
<body scroll="no" cz-shortcut-listen="true">
</body>

htmlcsscursorbackground-image

Answer №1

It appears that you are trying to hide the cursor outside of an image in your markup. One way to achieve this is by using the CSS property cursor: none, while still allowing the cursor to show in specific sections where it is needed.

Here is an example of how to hide the cursor outside of an image:

<style type="text/css">
    .hide-cursor { cursor:none; }
    .show-cursor { cursor:auto; }
</style>

<html>
  <body class="hide-cursor">
   <h1>These contents will have no cursor visibility</h1>
   <p>These contents will have no cursor visibility</p>
   <div class="show-cursor">
     <img src="https://image.shutterstock.com/image-photo/bright-spring-view-cameo-island-260nw-1048185397.jpg" />
   </div>
   <h1>These contents will have no cursor visibility</h1>
   <p>These contents will have no cursor visibility</p>
  </body>
</html>

If you want to hide the cursor from the entire page except for specific sections, you can use the following CSS code which applies to the entire page. Simply add the show-cursor class to the elements where you want the cursor to remain visible.

html * {cursor:none;}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues with Bootstrap form functionality

I found inspiration on http://getbootstrap.com and decided to enhance it by including a hidden input. The file result.php contains $_REQUEST. Only the hidden value is visible to me. <form class="form-horizontal" role="form" action="/requests/result.p ...

phphtmltwitter-bootstrap

Display only the selected data by default with the Django CheckboxSelectMultiple widget

Hey there, I'm looking for a way to display only selected data associated with my model_A model's user field in the form by default. Instead of listing all entries from the User model, I want to show only the data linked to model_A. My goal is to ...

htmldjango

Guide to creating a new element using jQuery

Question regarding JQuery and a Dropzone plugin. Here is the HTML code: <form action="/file-upload" class="dropzone"> <div class="fallback"> <input name="file" type="file" multiple /> </div> </form> Desired styling ...

javascriptjqueryhtmldropzone.js

Unraveling XML with XSLT 2.0 to Remove Normalization

I need help with denormalizing XML using XSLT 2.0. Here is an example of the XML and the desired output. I am looking for assistance in creating the XSLT code to achieve this. Denormalization should only apply to tags that start with "Change" and leave ot ...

htmlxslt-2.0denormalization

Encountering a problem with ng-repeat when working with a JSON

Having a bit of trouble displaying the keys and values from a JSON object in an HTML table using ng-repeat. The JSON object is coming from the backend, but for some reason, it's not showing up on the frontend. I know there must be a simple mistake som ...

javascripthtmlangularjs

The issue at hand is that one of the JavaScript buttons is functioning properly, while the other is not playing the video as intended. What steps can

I've been working on a script for my school project website that should make buttons play videos, but I'm running into an issue where it only works for the first button (btn). Programming isn't my strong suit, and I put this together based o ...

javascripthtmlcssvideo

JavaScript Hangman Game Malfunctioning

I am in the process of creating a basic hangman game to be played on a web browser. Whenever the user clicks a button, it triggers a function called pickWord(): <button onclick="pickWord()" id="restart">Choose A Word</button> This functi ...

javascripthtml

Altering the background color of the navigation bar when scrolling

So, my navigation bar starts with a transparent background, but I wanted it to change to a different background color when a user scrolls down. I found a solution in this question: Changing nav-bar color after scrolling? My current code now looks like th ...

jquerycss

Ways to display an image for a duration of 3 seconds upon clicking each button

Need help with my HTML/js code. I have a button that should display an image when clicked, but it's not working properly. Here is the code snippet: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&qu ...

javascripthtmlimage

What are some ways to enhance the specificity of HTML parsing code?

I'm currently facing a challenge where I need to extract hrefs and titles from an HTML page while only focusing on a tags that have both attributes. Some of the a tags do not have a title attribute. How can I modify my code to only display data from t ...

phphtml

The art of controlling iframe elements with jquery

I've been researching various topics related to this issue, but I'm still unable to achieve the desired outcome. Currently, I am embedding an iframe within an HTML document like so: <iframe class="full-screen-preview__frame" id="nitseditpre ...

javascriptjqueryhtmliframe

Ways to display and conceal menu depending on initial view and scrolling

On my website, I have implemented two menus - one to be displayed when the page loads and another to show up when a scroll occurs. You can view my page here. The goal is to have the white part visible when the position is at the top, and switch to the blu ...

javascriptjqueryhtmlcss

Making sure all items in the top row of Flexbox columns have the same height

Within my flex wrapper, I have multiple column components with various flex items inside. Each column displays content adjacent to each other. The challenge is to ensure that the top item in each column has an equal height, creating a row-like effect. I&a ...

htmlcssflexboxcss-grid

Is it possible to place the CSS menu on the right side of the screen

Is there a way to reposition the dropdown menu so that it appears on the right side of the title instead of below it? I've checked the CSS code but can't seem to find anything that ties it to the left side of the screen. https://i.sstatic.net/n0 ...

htmlcssmenuposition

Changing SVG containing image tags into HTML canvas

I'm attempting to convert an SVG file to an HTML canvas, and everything works perfectly until I introduce the image element in the SVG. When I include image elements, the canvg function stops working. Below is the code I used to convert the SVG to ca ...

javascriptjqueryhtmlsvg

Transforming CSV CSS values with jQuery's CSS method: Step-by-step guide

My goal is to stack multiple background images within a single div container while ensuring their position is relative to the screen height. The problem I'm encountering is my inability to modify CSS values separated by commas. Here is my logical appr ...

javascriptjquerycsshtml

Adding a child node before an empty node in Chrome with JavaScript Rangy

When attempting to insert a node before an empty element at the start of another element, a problem was noticed. Here is the initial setup: <p>|<span />Some text</p> By using range.insertNode() on a Rangy range to add some text, Chrome ...

javascripthtmldomrangy

jQuery Failing to Work

I'm experimenting with creating a falling effect for a DIV element when a piece of text is hovered over. The original effect can be seen here. var $dropDiv = $('#dropDiv'); $('#holder p').on('hover', function () { // ...

javascriptjqueryhtmlcss

100% div height scrollable navigation bar

I am working with bootstrap and have a span2 on the left side of my page acting as a navigation menu. The nav contains a list of items and I want it to be scrollable while taking up the remaining height of the page. Instead of absolutely positioning the n ...

htmlcssscroll

Optimizing Title Tags for Static Pages with Header Inclusion

Working on developing static web pages for a client who preferred not to use a content management system. These pages all have a shared header and footer php files. I am in need of creating unique title and meta description tags for each page, but I am un ...

phphtml