Clever Geek Handbook

How to do it: hover over circular nav from corner x to y

I have HTML code:

    <div id="wrap2">
        <div id="shape2">
            <a href="#" id="moveTop"><i class="ion ion-arrow-up-b"></i></a>
            <a href="#" id="moveRight"><i class="ion ion-arrow-up-b"></i></a>
            <a href="#" id="moveDown"><i class="ion ion-arrow-up-b"></i></a>
            <a href="#" id="moveLeft"><i class="ion ion-arrow-up-b"></i></a>
        </div>
    </div>

And the following CSS code:

#shape2 {
  width: 140px;
  height: 140px;
  position: fixed;
  top: 60px;
  left: 60px;
}

#shape2:before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0px 0 20px rgba(255,255,255,0.6);
}

#moveTop{
    position: fixed;
  top: 42px;
  left: 80px;
  color: #000;
  width: 100px;
  height: 40px;
    text-align: center;
}

#moveRight{
  position: fixed;
  top: 110px;
  left: 148px;
  color: #000;
  width: 100px;
  height: 40px;
    text-align: center;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

#moveDown{
  position: fixed;
  top: 178px;
  left: 80px;
  color: #000;
  width: 100px;
  height: 40px;
    text-align: center;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

#moveLeft{
  position: fixed;
    top: 110px;
  left: 12px;
  color: #000;
  width: 100px;
  height: 40px;
    text-align: center;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

How to properly navigate with arrows? What I mean is that if the user has a cursor arrow to move to the top #moveTop

, they should change the background of that "white" border inside the x angel to y to #eee.

Here's an example of my complete code: https://jsfiddle.net/L9aeu4o3/6/

+3


source to share


1 answer


So if I'm here, do you need arc behind arrow highlighting?

To do this, you need to place a div between the tags <a>

, for example:

    <a href="#" id="moveTop">
<i class="ion ion-arrow-up-b"></i>
<div id="highlightTop"></div>
</a>

looks terrible, doesn't it?



and in your CSS you want to do the following:

#moveTop:hover #highlightTop {
    position: fixed;
    top: 41px;
    left: 41px;
    width:140px;
    height:140px;
    border: 19px solid #eee;
    min-width: 4em;
    min-height: 4em;
    border-radius: 50%;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    z-index: -1;
}

It's a half-hearted solution, but no jquery, just a pure CSS / HTML solution.

Here's the jsfiddle!

+1


source






More articles: