Why is the custom cursor on my website not working?

Asked

Viewed 101 times

0

* {
	margin: 0px;
	padding: 0px;
}
body {
	cursor: url("http://www.rw-designer.com/cursor-extern.php?id=51224");
	background-image: url(https://i0.wp.com/media.giphy.com/media/10Hmp1WdHaHmDe/giphy.gif?w=1280&ssl=1);
	background-repeat: no-repeat;
	background-size: 100%;
}
.div-title {
	margin-top: 15px;
}
.label-1 {
	font-family:"Orbitron", sans-serif;
	font-size: 27px;
	color: cyan;
}
header {
	margin-top: 20px;
}
.img-random {
	border: 1px solid cyan;
	border-radius: 5px;
}
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
	<script src="http://yourjavascript.com/19500231119/title.js"></script>
	<link rel="icon" a href="https://is.gd/DhDDsG">
</head>
<body onmousedown="return false" onkeydown="return false">
	<div class="div-title">
		<center><label class="label-1">- 0wn3d bY 0xyrh0pus 777 - ^^</label></center>
	</div>
	<header>
		<center><img class="img-random" width="30%" src="https://is.gd/j8KmHb"></center>
	</header>
	<div class="gaf210imvustylez_youtubebox" style="width:1px;height:1px;overflow:hidden">
    <iframe allow="autoplay" width="300" height="300" src="https://www.youtube.com/embed/19s6EbcJ1tI?autoplay=1&amp;loop=1&amp;playlist=19s6EbcJ1tI" frameborder="0" allowfullscreen></iframe>
  </div>
</body>
</html>

html css
  • 2

    The right thing to do is to use the path to an image in CSS: cursor: url('caminho-para-imagem'), auto;

  • Thank you, it only worked to put the auto comma; I’m putting the cursor externally not internally.

1 answer

3

When using a cursor image it is necessary that you declare a fallback if the image is not loaded. Normally the auto, but you can use pointer or qq other default value. Here you can see more in the Mozilla documentation https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Syntax

inserir a descrição da imagem aqui

Another problem in your code is that the cursor only works on one part of the screen, this because its html/body, does not have a set height. To make the custom courses pick up the whole screen put the html/body with 100% of height

Follow the code with the courses working. OBS: Like the Snippet Stackoverflow does not accept images or link on http only https I put another image just so you could see that it worked

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

* {
	margin: 0px;
	padding: 0px;
}
body {
	cursor: url(https://www.filecluster.com/media/icons/206331.gif), auto;
	background-image: url(https://i0.wp.com/media.giphy.com/media/10Hmp1WdHaHmDe/giphy.gif?w=1280&ssl=1);
	background-repeat: no-repeat;
	background-size: 100%;

    /* cursor: pointer; */
}
.div-title {
	margin-top: 15px;
}
.label-1 {
	font-family:"Orbitron", sans-serif;
	font-size: 27px;
	color: cyan;
}
header {
	margin-top: 20px;
}
.img-random {
	border: 1px solid cyan;
	border-radius: 5px;
}
<div class="div-title">
	<center><label class="label-1">- 0wn3d bY 0xyrh0pus 777 - ^^</label></center>
</div>
<header>
  <center><img class="img-random" width="30%" src="https://is.gd/j8KmHb"></center>
</header>
<div class="gaf210imvustylez_youtubebox" style="width:1px;height:1px;overflow:hidden">
    <iframe allow="autoplay" width="300" height="300" src="https://www.youtube.com/embed/19s6EbcJ1tI?autoplay=1&amp;loop=1&amp;playlist=19s6EbcJ1tI" frameborder="0" allowfullscreen></iframe>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.