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.
Here is the remainder of code. Thank you.
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>