hover started

pad.html

@@ -1,6 +1,6 @@
 <style>
 
-.window
+.frame
 {
     position:relative;
     width:500px;
@@ -9,8 +9,14 @@
     box-sizing:border-box;
 }
 
+.frame__image
+{
+    position:relative;
+    z-index:20;
+    margin-bottom:19px;
+}
 
-.bar
+.frame__bar
 {
     position:relative;
     bottom:0;
@@ -18,8 +24,9 @@
     width:100%;
     height:44px;
     overflow:hidden;
+    transform-origin: center 22.5px;
 }
-.bar span
+.frame__bar span
 {
     display: block;
     position: absolute;
@@ -33,7 +40,7 @@
     transform: translate(-50%, 20px) rotate(45deg);
     transition: left 0.4s;
 }
-.bar span::before, .bar span::after
+.frame__bar span::before, .frame__bar span::after
 {
     content: " ";
     display: block;
@@ -43,60 +50,146 @@
     border-top: 5px solid black;
     transform:rotate(-45deg);
 }
-.bar span::before
+.frame__bar span::before
 {
     bottom: -0.5px;
     right: 20px;
     transform-origin: right bottom;
 }
-.bar span::after
+.frame__bar span::after
 {
     top: -4px;
     left: 17px;
     transform-origin: left top;
 }
-.bar--down
+.frame__bar--down
 {
     transform: scaleY(-1);
 }
-.bar--up
+.frame__bar--up
 {
     transform: scaleY(1);
 }
-.bar--1-3 span
+.frame__bar--1-3 span
 {
     left:16.6%;
 }
-.bar--2-3 span
+.frame__bar--2-3 span
 {
     left:50%;
 }
-.bar--3-3 span
+.frame__bar--3-3 span
 {
     left:83%;
 }
 
-
-button
+.frame__bracket
 {
-    display:inline-block;
+    position:relative;
+    display:block;
+    width:100%;
+    height:0px;
+    top:-200px;
+    z-index:10;
+    border-top:5px solid black;
+}
+.frame__bracket::before, .frame__bracket::after
+{
+    content:" ";
+    display:block;
+    width:20px;
+    height:171px;
+    position:absolute;
+    top:-5px;
+    border:5px solid black;
+}
+.frame__bracket::before
+{
+    border-right-width: 0px;
+    left:-20px;
+}
+.frame__bracket::after
+{
+    border-left-width: 0px;
+    right:-20px;
+}
+
+.frame__button
+{
+    position:relative;
+    display:block;
+    float:left;
     padding:5px 0px 5px 0px;
     box-sizing: border-box;
-    width:33%;
+    width:33.3%;
+    text-align:center;
+}
+.frame__button[data-frame-active='false']:hover::before
+{
+    content: " ";
+    display: block;
+    width: 7px;
+    height: 7px;
+    background: black;
+    position: absolute;
+    top: -27px;
+    left: 50%;
+    transform: translateX(-5px) rotate(45deg);
+}
+.frame__button[data-frame-index="0"]:hover::before, .frame__button[data-frame-index="1"]:hover::before, .frame__button[data-frame-index="2"]:hover::before
+{
+    top:auto;
+    bottom:-23px;
 }
 </style>
-<div class="window">
-    <img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
-    <button onclick="BarPos(1)">Front</button><button onclick="BarPos(2)">Spine</button><button onclick="BarPos(3)">Back</button>
-    <div class="bar"><span></span></div>
-    <button onclick="BarPos(4)">Intro</button><button onclick="BarPos(5)">1 & 2</button><button onclick="BarPos(6)">3 & 4</button>
+<div class="frame">
+    <div class="frame__image">
+        <img style="display:block; width:100%; height:auto;" src="https://via.placeholder.com/1024x512.png"/>
+    </div>
+    <div class="frame__button">Cover</div><div class="frame__button">Back </div><div class="frame__button">Spine</div>
+
+    <div class="frame__bar"><span></span></div>
+    <div class="frame__bracket"></div>
+
+    <div class="frame__button">Intro</div><div class="frame__button">1 & 2</div><div class="frame__button">3 & 4</div>
 </div>
 
 <script>
-    function BarPos(index)
+    function frame__setup(inFrame)
     {
-        var classX = "bar--" + (((index-1) % 3)+1) + "-3";
-        var classY = index > 3 ? "bar--down" : "bar--up";
-        document.querySelector(".bar").setAttribute("class", "bar " + classX + " " + classY);
+        var buttons = inFrame.querySelectorAll(".frame__button");
+        var bar = inFrame.querySelector(".frame__bar");
+        var active = false;
+
+
+
+        function activate(inButton)
+        {
+            var index = parseInt(inButton.getAttribute("data-frame-index"));
+            var classX = "frame__bar--" + ((index % 3)+1) + "-3";
+            var classY = index > 2 ? "frame__bar--down" : "frame__bar--up";
+
+            bar.setAttribute("class", "frame__bar " + classX + " " + classY);
+            if(active)
+            {
+                active.setAttribute("data-frame-active", "false");
+            }
+            active = inButton;
+            inButton.setAttribute("data-frame-active", "true");
+        }
+        function hover(inButton)
+        {
+            
+        }
+        for(var i=0; i<buttons.length; i++)
+        {
+            buttons[i].setAttribute("data-frame-index", i);
+            buttons[i].setAttribute("data-frame-active", "false");
+            buttons[i].addEventListener("click", function(){ activate(this); });
+        }
+
+        activate( buttons[0] );
     }
+
+    frame__setup(document.querySelector(".frame"));
 </script>