×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

3 state slider toggle switch - move slider to state when hover

3 state slider toggle switch - move slider to state when hover

3 state slider toggle switch - move slider to state when hover

(OP)
I am trying to create a 3 state toggle switch where the slider temporarily moves when the cursor hovers over the option, but returns to original state when cursor is moved away.
See this link as an example: Link

I found this switch example Link, but the slider only moves when the option is clicked. If I add this to the CSS the slider will move irradically, but will not stay in the hover position.

CODE --> CSS

#first_toggle:hover ~ .toggle_option_slider{
          background: rgba(0,0,0,0.1);
          left: 0px;
        }
        #second_toggle:hover ~ .toggle_option_slider{
          background: rgba(0,0,0,.1);
          left: 100px;
        }
        #third_toggle:hover ~ .toggle_option_slider{
          background: rgba(0,0,0,0.1);
          left: 204px;
        } 

Here is the remainder of code. Thank you.

CODE --> CSS

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
        *{
          margin:0px;
          padding:0px;
        }
        .toggle_radio{          /* this is the outer ring */
          position: relative;
          /*background: rgba(255,255,255,.1);
          background: #red; */
          border: solid blue thin;
          opacity: 1;
          margin: 4px auto;
          overflow: hidden;
          padding: 0 !important;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          border-radius: 50px;
          position: relative;
          height: 30px;
          width: 308px;
        }
        .toggle_radio > * {
          float: left;
          cursor: pointer;
        }
        .toggle_radio input[type=radio]{
          display: none;
        }
        .toggle_radio label{
          font: 16px "Source Sans Pro";
          color: black;
          opacity: 1;
          z-index: 0;
          display: block;
          width: 100px;
          height: 22px;
          margin: 5px auto;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          border-radius: 50px;
          z-index: 1;
          text-align: center;
        }
        .toggle_option_slider{
          width: 100px;
          border: blue solid;
          border-width: 3px;
          height: 24px;
          position: absolute;
          -webkit-border-radius: 50px;
          -moz-border-radius: 50px;
          border-radius: 50px;
          -webkit-transition: all .4s ease;
          -moz-transition: all .4s ease;
          -o-transition: all .4s ease;
          -ms-transition: all .4s ease;
          transition: all .4s ease;
        }

        #first_toggle:checked ~ .toggle_option_slider{
          background: rgba(0,0,0,0.1);
          left: 0px;
        }
        #second_toggle:checked ~ .toggle_option_slider{
          background: rgba(0,0,0,.1);
          left: 100px;
        }
        #third_toggle:checked ~ .toggle_option_slider{
          background: rgba(0,0,0,0.1);
          left: 204px;
        } 

CODE --> HTML

<div class="toggle_radio">
        <input type="radio" class="toggle_option" id="first_toggle" name="toggle_option" onclick=""> 
        <input type="radio" checked class="toggle_option" id="second_toggle" name="toggle_option"  onclick="">
        <input type="radio" class="toggle_option" id="third_toggle" name="toggle_option" onclick="">
        <label for="first_toggle"><p>Today</p></label>
        <label for="second_toggle"><p>Yesterday</p></label>
        <label for="third_toggle"><p>Week</p></label>
        <div class="toggle_option_slider"></div>
    </div> 

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close