The mouseover event occurs when the mouse pointer is over the selected element.
The mouseover() method triggers the mouseover event, or attaches a function to run when a mouseover event occurs.
Syntax:
$(selector).mouseover()Attach a function to the mouseover event (optional):
$(selector).mouseover(function)Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "pink");
});
$("p").mouseout(function(){
$("p").css("background-color", "green");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>Output:
Let’s go to the animation:
By moving the mouse cursor on the elements make them moving.
To see the live output of the animation click here.
What you need to do?
- Add HTML
- Add CSS
- Add CSS Animation
- Add jQuery
Step1.
Add HTML
<div class="container">
<div class="bokeh">
<div class="bokeh1"></div>
<div class="bokeh2"></div>
<div class="bokeh3"></div>
<div class="bokeh4"></div>
<div class="bokeh5"></div>
<div class="bokeh6"></div>
<div class="bokeh7"></div>
<div class="bokeh8"></div>
<div class="bokeh9"></div>
<div class="bokeh10"></div>
<div class="bokeh11"></div>
<div class="bokeh12"></div>
<div class="bokeh13"></div>
<div class="bokeh14"></div>
<div class="bokeh15"></div>
<div class="bokeh16"></div>
<div class="bokeh17"></div>
<div class="bokeh18"></div>
<div class="bokeh19"></div>
<div class="bokeh20"></div>
</div>
</div>Step2.
Add CSS
Set the colour and the size of the background, and the container:
body {
background: black;
height: 100vh;
}
.container {
position: relative;
}Style dots:
.bokeh {
position: relative;
width: 75%;
height: 80vh;
}
.bokeh1 {
position: absolute;
border-radius:50%;
background-color: #FF1654;
width: 200px;
height: 200px;
opacity: 0.5;
box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
animation: move 5s linear infinite;
animation: move 13s ease infinite;
}
.bokeh2 {
position: absolute;
border-radius:50%;
background-color: #F3FFBD;
width: 160px;
left: 200px;
height: 160px;
opacity: 0.5;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 11s ease infinite;
}
.bokeh3 {
position: absolute;
border-radius:50%;
background-color: #247BA0;
width: 160px;
left: 200px;
height: 160px;
opacity: 0.5;
top:100px;
box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
animation: move 9s ease infinite;
}
.bokeh4 {
position: absolute;
border-radius:50%;
background-color: #FF006E;
width: 160px;
height: 160px;
opacity: 0.5;
top:300px;
left:500px;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 12s ease infinite;
}
.bokeh5 {
position: absolute;
border-radius:50%;
background-color: #8338EC;
width: 160px;
height: 160px;
opacity: 0.5;
top:400px;
left:600px;
box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
animation: move 10s ease infinite;
}
.bokeh6 {
position: absolute;
border-radius:50%;
background-color: #FFBE0B;
width: 100px;
height: 100px;
opacity: 0.5;
top:300px;
left:700px;
box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
animation: move 11s ease infinite;
}
.bokeh7 {
position: absolute;
border-radius:50%;
background-color: #FB5607;
width: 100px;
height: 100px;
opacity: 0.5;
top:100px;
left:800px;
box-shadow:inset -10px 5px 0 rgba(0,0,0,0.07);
animation: move 9s ease infinite;
}
.bokeh8 {
position: absolute;
border-radius:50%;
background-color: #EF476F;
width: 100px;
height: 100px;
opacity: 0.5;
top:200px;
left:600px;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 12s ease infinite;
}
.bokeh9 {
position: absolute;
border-radius:50%;
background-color: #FFD166;
width: 100px;
height: 100px;
opacity: 0.5;
top:300px;
left:400px;
box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
animation: move 8s ease infinite;
}
.bokeh10 {
position: absolute;
border-radius:50%;
background-color: #06D6A0;
width: 200px;
height: 200px;
opacity: 0.5;
top:500px;
left:400px;
box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
animation: move 10s ease infinite;
}
.bokeh10 {
position: absolute;
border-radius:50%;
background-color: #06D6A0;
width: 200px;
height: 200px;
opacity: 0.5;
top:500px;
left:400px;
box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
animation: move 10s ease infinite;
}
.bokeh11 {
position: absolute;
border-radius:50%;
background-color: #118AB2;
width: 200px;
height: 200px;
opacity: 0.5;
top:200px;
left:800px;
box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
animation: move 10s ease infinite;
}
.bokeh12 {
position: absolute;
border-radius:50%;
background-color: #06D6A0;
width: 180px;
height: 180px;
opacity: 0.5;
top:200px;
left:1100px;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 12s ease infinite;
}
.bokeh13 {
position: absolute;
border-radius:50%;
background-color: #073B4C;
width: 180px;
height: 180px;
opacity: 0.5;
top:300px;
left:1500px;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 14s ease infinite;
}
.bokeh14 {
position: absolute;
border-radius:50%;
background-color: #4ECDC4;
width: 100px;
height: 100px;
opacity: 0.5;
top:200px;
left:1600px;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 12s ease infinite;
}
.bokeh15 {
position: absolute;
border-radius:50%;
background-color: #FF6B6B;
width: 100px;
height: 100px;
opacity: 0.5;
top:100px;
left:1500px;
box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
animation: move 8s ease infinite;
}
.bokeh16 {
position: absolute;
border-radius:50%;
background-color: #FFE66D;
width: 100px;
height: 100px;
opacity: 0.5;
top:200px;
left:1300px;
box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
animation: move 11s ease infinite;
}
.bokeh17 {
position: absolute;
border-radius:50%;
background-color: #F3722C;
width: 160px;
height: 160px;
opacity: 0.5;
top:300px;
left:1400px;
box-shadow:inset 10px -5px 0 rgba(0,0,0,0.07);
animation: move 9s ease infinite;
}
.bokeh17 {
position: absolute;
border-radius:50%;
background-color: #90BE6D;
width: 160px;
height: 160px;
opacity: 0.5;
top:100px;
left:1300px;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 13s ease infinite;
}
.bokeh18 {
position: absolute;
border-radius:50%;
background-color: #F8961E;
width: 160px;
height: 160px;
opacity: 0.5;
top:100px;
left:800px;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 11s ease infinite;
}
.bokeh18 {
position: absolute;
border-radius:50%;
background-color: #F94144;
width: 160px;
height: 160px;
opacity: 0.5;
top:200px;
left:900px;
box-shadow:inset -10px -5px 0 rgba(0,0,0,0.07);
animation: move 9s ease infinite;
}
.bokeh19 {
position: absolute;
border-radius:50%;
background-color: #577590;
width: 160px;
height: 160px;
opacity: 0.5;
top:100px;
left:1100px;
box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
animation: move 14s ease infinite;
}
.bokeh20 {
position: absolute;
border-radius:50%;
background-color: #F3722C;
width: 100px;
height: 100px;
opacity: 0.5;
top:300px;
left:1200px;
box-shadow:inset 10px 5px 0 rgba(0,0,0,0.07);
animation: move 14s ease infinite;
}Step3.
Add CSS Animation
@keyframes move {
from {
transform: rotate(0deg)
translate(200px)
rotate(0deg);
}
to {
transform: rotate(360deg)
translate(100px)
rotate(-360deg);
}
}Step4.
Add jQuery
jQuery(function($) {
$(".bokeh1, .bokeh2, .bokeh3, .bokeh4, .bokeh5, .bokeh6, .bokeh7, .bokeh8, .bokeh9, .bokeh10, .bokeh11, .bokeh11, .bokeh12, .bokeh13, .bokeh14, .bokeh15, .bokeh16, .bokeh17, .bokeh18, .bokeh19, .bokeh20").mouseover(function() {
var dWidth = $(document).width() - 50,
dHeight = $(document).height() - 50,
nextX = Math.floor(Math.random() * dWidth),
nextY = Math.floor(Math.random() * dHeight);
$(this).animate({ left: nextX + 'px', top: nextY + 'px' });
});
});To see the live output of the animation visit lenastanley.com.
Enjoy coding!