I am looking to design a menu that always keeps the arrow pointing at the button I hover over with my cursor. If I don't hover on any button, then it should stay in the position of the last button I hovered over.
HTML:
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Test</title>
</head>
<body>
<div class="container">
<div class="first row">
<button class="two btn btn-default col-xs-2 col-sm-offset-5 left">Second</button>
</div>
<div class="second row">
<button class="one btn btn-default col-xs-2 col-sm-offset-2 left">First</button>
<p class="col-xs-4 text-center">
<span class="glyphicon glyphicon-arrow-up"></span>
</p>
<button class="three btn btn-default col-xs-2 left">Third</button>
</div>
<div class="third row">
<button class="four btn btn-default col-xs-2 col-sm-offset-5 left">Fourth</button>
</div>
</div>
</body>
</html>
SCSS:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 500px;
height: 300px;
background: lightgrey;
margin-top: 50px;
.first {
height: 100px;
display: flex;
align-items: center;
}
.second {
height: 100px;
display: flex;
align-items: center;
}
.third {
height: 100px;
display: flex;
align-items: center;
}
p {
color: white;
font-size: 50px;
transform: rotate(-90deg);
}
}
.rotate-first{
transform: rotate(0deg);
transition: all 0.5s ease;
}
.rotate-second{
transform: rotate(90deg);
transition: all 0.5s ease;
}
.rotate-third{
transform: rotate(180deg);
transition: all 0.5s ease;
}
.rotate-fourth{
transform: rotate(270deg);
transition: all 0.5s ease;
}
JQuery:
$("button.one").hover(function(){
$("span").addClass("rotate-first");
});
$("button.two").hover(function(){
$("span").addClass("rotate-second");
});
$("button.three").hover(function(){
$("span").addClass("rotate-third");
});
$("button.four").hover(function(){
$("span").addClass("rotate-fourth");
});
You can view the codes here.
Is it achievable with CSS alone or does it require JavaScript?