So I've got two custom mouse cursors that I'd like to keep at all times. The first cursor is a face, and the second is a face with an open mouth, it switches to the second one when the user clicks.
My problem is that when the user hovers over a certain object, like a div class, then the custom cursor disappears and it reverts to the default cursor.
How would I fix this problem?
The code for the cursor is in my CSS document.
Screenshots: https://i.imgur.com/P8ceHUo.jpeg, https://i.imgur.com/HSNLXpb.jpeg, https://i.imgur.com/VUd5BKx.jpg
body {
height: 100vh;
cursor: url('../images/cursor3.png'), auto;
background-image: url(../images/backgroundDonuts.jpg);
}
body:active {
height: 100vh;
cursor: url('../images/cursor3-eat.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="../images/donut-final.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="../images/donut-final.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="../images/donut-final.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="../images/donut-final.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="../images/donut-final.png"></label>
</div>
</section>
</body>
</html>
Below the CSS for my default cursor overrides I always use. I added your cursor as an example (can't test if it works, though), modify them to your needs as required.
/*****************************/
/* Global cursor preferences */
/*****************************/
body { cursor: default; cursor: url('../images/cursor3.png'), auto }
input { cursor: auto } /* Use a custom cursor, except on: */
input[list="datalist"],
input[type="button" ],
input[type="checkbox"],
input[type="radio" ],
input[type="color" ],
input[type="range" ],
input[type="reset" ],
input[type="file" ],
input[type="submit" ],
label:not([for=""]),
a,button,select,keygen { cursor: pointer }
[contenteditable="true"] { cursor: text }
You can use universal selector * to make it work on every :hover element (obviously you will need to just change url for yours):
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
DEMO (just click to see the active)
body {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
background-image: url('https://cdn.pixabay.com/photo/2020/01/14/10/55/cartoon-4764725_960_720.png');
}
body:active {
height: 100vh;
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
.title {
font-family: 'Gloria Hallelujah', cursive;
position: absolute;
top: 2%;
left: 41%;
text-align: center;
color: yellow;
text-shadow: -1px 3px 3px black;
animation-name: eat;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 2.5s;
}
#keyframes eat{
0% { transform: scale(1);
}
50% { transform: scale(2);
}
100% { transform: scale(1);
}
}
.micro
{
position: absolute;
top: 61.7%;
left: 11.8%;
transform: rotate(-14deg);
font-size: 50%;
font-family: Arial, Helvetica, sans-serif;
color: red;
animation-name: micro;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 1s;
}
#keyframes micro{
0% {opacity: 0%;}
50% {opacity: 100%;}
100% {opacity: 0%;}
}
.run {
width: 5%;
top: 45%;
left: 41%;
position: absolute;
animation-name: run;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 3s;
}
#keyframes run {
0% {transform: translateX(0px); transform: rotateX(0px)}
50% {transform: translateX(120px); transform: rotateY(0px);}
75% {transform: translateX(80px); transform: rotateY(180deg);}
100% {transform: translateX(0px);}
}
.kitchen {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
}
.lightbox {
position: absolute;
top: 28px;
left: 80px;
height: 90%;
width: 90%;
animation-name: glow;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
#keyframes glow{
0% {opacity: 0%;}
50% {opacity: 50%;}
100% {opacity: 0%;}
}
input[type="radio"] {
display: none;
counter-increment: unchecked-sum;
}
input[type="radio"]:checked + label {
display: none;
counter-increment: checked-sum;
}
.images {
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.do1 {
top: 67%;
left: 50%;
}
.do2 {
top: 60%;
left: 15%;
}
.do3{
top: 55%;
left: 70%;
}
.do4{
top: 23.5%;
left: 75%;
}
.do5{
top: 21%;
left: 28%;
}
section img{
max-width: 40px;
}
body *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png'), auto;
}
body:active *:hover{
cursor: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png'), auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Eat the donuts!</title>
<link href="https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap" rel="stylesheet">
<link rel="stylesheet" href="../css/spillside.css">
</head>
<body>
<div class="container">
<img src="../images/background-page2-new.png" class="kitchen" draggable="false">
<img src="../images/homer-run.gif" class="run" draggable="false">
<img src="../images/light.png" class="lightbox" draggable="false">
<div class="text">
<h1 class="title">Eat all the donuts!</h1>
<p class="micro">ready</p>
</div>
</div>
<section>
<div class="images do1">
<input type="radio" id="donut1">
<label for="donut1"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do2">
<input type="radio" id="donut2">
<label for="donut2"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do3">
<input type="radio" id="donut3">
<label for="donut3"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do4">
<input type="radio" id="donut4">
<label for="donut4"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
<div class="images do5">
<input type="radio" id="donut5">
<label for="donut5"><img src="https://cdn.pixabay.com/photo/2016/01/14/11/57/donut-1139832_960_720.png"></label>
</div>
</section>
</body>
</html>
I'm trying to animate a scrolling text (in a paragraph) so that it will move from the bottom to the top of a div, scroll out of the div (become invisible) and then loop. Here is the relevant css:
#keyframes showAndScroll {
0% {opacity: 0;}
10% {opacity: 0.85;}
50% {opacity: 0.85;}
60% {opacity: 0;}
100% {opacity: 0;}
}
.infobar {
position: absolute;
width: 100%;
height: 30%;
bottom: 0%;
color: white;
background-color: red;
opacity: 0.75;
text-indent: 30px;
font-size: 200%;
pointer-events: none;
animation-name: showAndScroll;
animation-duration: 40s;
animation-iteration-count: infinite;
}
#keyframes scroll {
0% {
transform: translateY(600%); color: red;
}
50% {
transform: translateY(-200%); color: blue;
}
}
.infobar p {
position: absolute;
width: 100%;
overflow: hidden;
display: inline-block;
animation-name: scroll;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
And the html code:
<div class="infobar">
<p>
Infobar test
<p>
</div>
I'm having two issues:
The text overlaps the rest of the document. How can I make the paragraph invisible as it hits the edge of its parent div? This effect is what I'm looking for: http://media02.hongkiat.com/marquee-css3-animation//demo/index2.html
For some reason, placing the paragraph at 100% of the div doesn't seem to put it on the "bottom" of the div (I've currently placed it at 600%). Why is this?
Any input is appreciated. Here is my JSfiddle: https://jsfiddle.net/essi/oqh6ok00/1/
Add overflow: hidden; to class .infobar. In this way the overflow is clipped, and your animated element will be visible within edges similarly to what you have shown us in your link example.
#keyframes showAndScroll {
0% {
opacity: 0;
}
10% {
opacity: 0.85;
}
50% {
opacity: 0.85;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.infobar {
position: absolute;
width: 100%;
height: 30%;
bottom: 0%;
color: white;
background-color: red;
opacity: 0.75;
text-indent: 30px;
font-size: 200%;
pointer-events: none;
animation-name: showAndScroll;
animation-duration: 40s;
animation-iteration-count: infinite;
overflow: hidden;
}
#keyframes scroll {
0% {
transform: translateY(600%);
color: red;
}
50% {
transform: translateY(-200%);
color: blue;
}
}
.infobar p {
position: absolute;
width: 100%;
overflow: hidden;
display: inline-block;
animation-name: scroll;
animation-duration: 40s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
<div class="infobar">
<p>
Infobar test
<p>
</div>
I have a down arrow with rings in a ripple effect around it. The down arrow click doesn't work with the rings around it, but if I remove the rings, the click function works normally.
This is the webpage: https://rimildeyjsr.github.io/St.Anthony-Website/
Any ideas how to fix it?
CSS:
body{
background: red;
}
.down-arrow {
display: none;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 5;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
HTML:
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
add z-index some higher value will solve the problem
body{
background: red;
}
.down-arrow {/*
display: none;*/
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: 50%;
z-index: 15;
border-radius: 50%;
height: 80px;
width: 80px;
}
.ring {
border: 2.5px solid white;
-webkit-border-radius: 50%;
height: 80px;
width: 80px;
position: absolute;
left:0;
right: 0;
top:50%;
z-index: 5;
margin: 0 auto;
-webkit-animation: pulsate 2s ease-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 2s;
opacity: 0.0;
}
.ring2 {
-webkit-animation-delay: 1.4s;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0,0); opacity: 1;}
100% {-webkit-transform: scale(1.2,1.2); opacity: 0;}
}
<img src="images/down-arrow.png" alt="down arrow for navigation" class="img-responsive down-arrow animated slideInDown">
<div class="ring"></div>
<div class="ring ring2"></div>
Credit to #nevermind
I want to make center this Miss, hug...
This is my site: https://www.ajdinalic.cf/
Image: http://prntscr.com/69oewr
I am still new at this coding, and found this code on google
This is on weebly btw, i tried to fix but i dont know and i dont want to make it worse
.rw-wrapper{
width: 80%;
position: relative;
margin: 110px auto 0 auto;
font-family: 'Bree Serif';
padding: 10px;
}
.rw-sentence{
margin: 0;
text-align: center;
text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.rw-sentence span{
color: #444;
white-space: initial;
font-size: 200%;
font-weight: normal;
}
.rw-words{
display: inline;
}
.rw-words span{
position: absolute;
opacity: 0;
overflow: hidden;
width: 100%;
color: #6b969d;
text-align: center;
}
.rw-words-1 span{
animation: rotateWordsFirst 18s linear infinite 0s;
text-align: center;
}
.rw-words-2 span{
animation: rotateWordsSecond 18s linear infinite 0s;
}
.rw-words span:nth-child(2) {
animation-delay: 3s;
color: #6b889d;
}
.rw-words span:nth-child(3) {
animation-delay: 6s;
color: #6b739d;
}
.rw-words span:nth-child(4) {
animation-delay: 9s;
color: #7a6b9d;
}
.rw-words span:nth-child(5) {
animation-delay: 12s;
color: #8d6b9d;
}
.rw-words span:nth-child(6) {
animation-delay: 15s;
color: #9b6b9d;
}
#keyframes rotateWordsFirst {
0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
8% { opacity: 1; height: 60px; }
19% { opacity: 1; height: 60px; }
25% { opacity: 0; height: 60px; }
100% { opacity: 0; }
}
#keyframes rotateWordsSecond {
0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
10% { opacity: 0.3; width: 0px; }
20% { opacity: 1; width: 100%; }
27% { opacity: 0; width: 100%; }
100% { opacity: 0; }
}
<!DOCTYPE html>
<html>
<head></head>
<section class="rw-wrapper">
<h2 class="rw-sentence">
<span>I</span>
<br>
<div class="rw-words rw-words-1">
<span>Miss</span>
<span>Want to hug</span>
<span>Want to kiss</span>
<span>Need</span>
<span>Want to see</span>
<span>Want to be with</span>
</div><br>
<span>You</span>
</h2>
</section>
<body class=' wsite-theme-light'>
<div style='display:none'>{title}</div>
<div style='display:none'>{menu}</div>
<div style='display:none'>{content}</div>
<div style='display:none'>{content}>{footer}</div>
</body>
</html>
Add top: 75px; left: 0; right: 0; to .rw-words span.
Let me know if this helps.
my css animation run well but when the animation is fisnished, i can't interacting with anchor or another interaction on my website...
hr{
height: 5px;
position: absolute;
top:50%;
margin: 0;
padding: 0;
background: black;
z-index: 4;
-webkit-animation: ligne 5s;
-webkit-animation-fill-mode: forwards;
}
#background{
z-index: 3;
height: 100%;
width: 100%;
position: absolute;
top: 0;
background-image: linear-gradient(white, #EFF0FF);
-webkit-animation: fond 5s;
-webkit-animation-fill-mode: forwards;
}
#logo{
color: red;
line-height: 100%;
position: absolute;
z-index: 4;
font-weight: bold;
top: 40%;
left: 40%;
-webkit-animation: logo 5s;
-webkit-animation-fill-mode: forwards;
}
#-webkit-keyframes ligne{
0%{width:0%;}
60%{width: 99.9%;}
80%{width: 99.9%;opacity: 1;}
100%{width: 99.9%;opacity: 0;}
}
#-webkit-keyframes fond{
0%{background-image: linear-gradient(white, #EFF0FF);}
80%{background-image: linear-gradient(white, #EFF0FF);}
100%{background: transparent;}
}
#-webkit-keyframes logo{
0%{opacity: 0;}
30%{opacity: 1;}
80%{opacity: 1;}
100%{opacity: 0;}
}
I'm only on HTML5/CSS3, so please don't reply solution in JS or other, thanks :).