Currently, I am working on creating an arrow-like element that moves up when hovered over and returns to its original position when the mouse is no longer hovering. To achieve this effect, I have placed the arrow within a parent div and set up event listeners for mouseover and mouseout on the parent div. Below is the code snippet:
HTML:
<div class="outercircle">
<div class="circle">
<div class="innercircle"></div>
</div>
</div>
CSS:
.outercircle {
border: 1px solid black;
margin-top: 80vh;
width: 80px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.circle {
width: 60px;
height: 60px;
border: 7px solid black;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.innercircle {
display: inline-block;
margin-top: 15%;
margin-left: 24.5%;
width: 40%;
height: 40%;
border-top: 7px solid black;
border-right: 7px solid black;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
JavaScript:
<script>
$(document).ready(function() {
var $outercircle = $(".outercircle");
var $circle = $(".circle");
$outercircle.hover(function() {
$circle.animate({
marginTop: 0
}, 200);
});
$outercircle.mouseout(function() {
$circle.animate({
marginTop: 20
}, 200);
});
})
</script>
It seems that the functionality only works when hovering over the inner circle (.innercircle), and the cursor:pointer style also applies only to .innercircle. Any assistance would be greatly appreciated. Happy holidays!
Edit: A simplified version of the code works fine on jsfiddle. Here is the full HTML and CSS in case there are any discrepancies.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylz.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Thomas Urbanak</title>
<script>
$(document).ready(function() {
var $outercircle = $(".outercircle");
var $circle = $(".circle");
$outercircle.mouseenter(function() {
$circle.animate({
marginTop: 0
}, 200);
});
$outercircle.mouseleave(function() {
$circle.animate({
marginTop: 20
}, 200);
});
})
</script>
</head>
<body>
<div id="titlet">
<ul id="menu">
<li class="menu"><a href="#">home</a></li>
<li class="menu"><a href="#">work</a></li>
<li class="menu"><a href="#">about</a></li>
</ul>
<h1 class="title">BOB.BLUBLA</h1>
<hr>
<p class="subtitle">This is a paragraph, made up of words.</p>
</div>
<div class="outercircle">
<div class="circle">
<div class="innercircle"></div>
</div>
</div>
</body>
</html>
CSS:
/*menu*/
#menu {
font-family: "Roboto", sans;
font-size: 20px;
}
.menu {
display: inline-block;
}
a {
text-decoration: none;
color: black;
-webkit-transition: border-bottom .15s;
transition: border-bottom .15s;
}
a:hover {
border-bottom: 5px solid #ff5c5c;
}
#menu, .menu {
list-style: none;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
/*title tile*/
#titlet {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
}
.title {
font-family: "titlefont", sans;
text-align: center;
font-size: 90px;
margin-top: 250px;
}
hr {
width: 20%;
height: 7px;
background: black;
border: none;
margin-top: -50px;
}
.subtitle {
text-align: center;
font-family: "Roboto", sans;
font-size: 20px;
}
/*circle*/
.outercircle {
border: 1px solid black;
margin-top: 80vh;
width: 80px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.circle {
width: 60px;
height: 60px;
border: 7px solid black;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.innercircle {
display: inline-block;
margin-top: 15%;
margin-left: 24.5%;
width: 40%;
height: 40%;
border-top: 7px solid black;
border-right: 7px solid black;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}