Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

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

Status
Not open for further replies.

waubain

Technical User
Dec 13, 2011
200
US
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.

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.

CSS:
        @import url([URL unfurl="true"]http://fonts.googleapis.com/css?family=Source+Sans+Pro);[/URL]
        *{
          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;
        }

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>
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top