选中时切换悬停动画

时间：2019-10-01 13:32:50

标签： javascript html css

我用html，css和js进行了自己的切换。当我将开关悬停时，我有一个动画。当未选中该开关时，此方法工作正常。检查开关时，我想以相反的方式使用相同的悬停动画。这是我的问题，它不起作用。

我不检查并悬停它。我尝试过这样的事情：

input:checked + input:hover {
  -webkit-transform: unset;
  -ms-transform: unset;
  transform: unset;
}


$(document).ready(function(){

    
    
    $('.js-check').click(function(){
            if($(this).prop("checked") == true){
                $( "#s2" ).removeClass( "switchText-notActive" );
                $( "#s2" ).addClass( "switchText-active" );
                $( "#s1" ).removeClass( "switchText-active" );
                $( "#s1" ).addClass( "switchText-notActive" );
            }
            else if($(this).prop("checked") == false){
                $( "#s1" ).removeClass( "switchText-notActive" );
                $( "#s1" ).addClass( "switchText-active" );
                $( "#s2" ).removeClass( "switchText-active" );
                $( "#s2" ).addClass( "switchText-notActive");
            }
        });
    });
.switchText-active {
    color: #FF6600;
    -webkit-transition: .5s;
    transition: .5s;
}

.switchText-notActive {
    color: #DEDEDE;
     -webkit-transition: .2s;
    transition: .2s;
}

.switch {
    position: relative;
    width: 47px;
    height: 24px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: -6px;
}

.switch input {
   display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FF6600;
    -webkit-transition: .2s;
    transition: .2s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .2s;
    transition: .2s;
}

input:checked + .slider {
    background-color: #FF6600;
}

input:checked + .slider:before {
    -webkit-transform: translateX(21px);
    -ms-transform: translateX(21px);
    transform: translateX(21px);
}

input:hover + .slider:before {
    -webkit-transform: translateX(21px);
    -ms-transform: translateX(21px);
    transform: translateX(21px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 36px;
}

.slider.round:before {
    border-radius: 50%;
}

.switch input:disabled + span {
    background-color: #2196F3;
    cursor: not-allowed;
    opacity: 0.6;
}

.switch input:not(:checked):disabled + span {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}


.myspan {
	height: 14px;
	width: 46px;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	line-height: 14px;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Website</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/e7ece1a81e.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="switch.css">
    <link rel="stylesheet" type="text/css" href="css/checkbox.css">
</head>

<body>
    
    <br><br>
    <div class="container">
       <h1>Checkbox and Switch</h1>

        <div class="row justify-content-md-center">
            <div class="col-12 ">
                <span id="s1" class="switchText-active myspan">PICKUP</span>
                <label class="switch js-switch">
                    <input class="js-check" name="switch" type="checkbox">
                    <span class="slider round"></span>
                </label>
                <span id="s2" class="switchText-notActive myspan">DELIVERY</span>
            </div>
        </div>
    </div>
    <br>
    <br>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="script.js"></script>
    <script src="switch.js"></script>
</body></html>

我希望当选中开关并用鼠标将其悬停时，滑块会跳回到起点。

1 个答案:

答案 0 :(得分：1)

要悬停选中的输入元素，请使用input:checked:hover 

input[type="checkbox"]:checked:hover + .slider:before {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}

我希望这是您所期望的：

$(document).ready(function(){

    
    
    $('.js-check').click(function(){
            if($(this).prop("checked") == true){
                $( "#s2" ).removeClass( "switchText-notActive" );
                $( "#s2" ).addClass( "switchText-active" );
                $( "#s1" ).removeClass( "switchText-active" );
                $( "#s1" ).addClass( "switchText-notActive" );
            }
            else if($(this).prop("checked") == false){
                $( "#s1" ).removeClass( "switchText-notActive" );
                $( "#s1" ).addClass( "switchText-active" );
                $( "#s2" ).removeClass( "switchText-active" );
                $( "#s2" ).addClass( "switchText-notActive");
            }
        });
    });
.switchText-active {
    color: #FF6600;
    -webkit-transition: .5s;
    transition: .5s;
}

.switchText-notActive {
    color: #DEDEDE;
     -webkit-transition: .2s;
    transition: .2s;
}

.switch {
    position: relative;
    width: 47px;
    height: 24px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: -6px;
}

.switch input {
   display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #FF6600;
    -webkit-transition: .2s;
    transition: .2s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .2s;
    transition: .2s;
}

input:checked + .slider {
    background-color: #FF6600;
}

input[type="checkbox"]:checked  + .slider:before {
    -webkit-transform: translateX(21px);
    -ms-transform: translateX(21px);
    transform: translateX(21px);
}

input[type="checkbox"]:checked:hover + .slider:before {
    -webkit-transform: translateX(0px);
    -ms-transform: translateX(0px);
    transform: translateX(0px);
}
input:hover + .slider:before {
    -webkit-transform: translateX(21px);
    -ms-transform: translateX(21px);
    transform: translateX(21px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 36px;
}

.slider.round:before {
    border-radius: 50%;
}

.switch input:disabled + span {
    background-color: #2196F3;
    cursor: not-allowed;
    opacity: 0.6;
}

.switch input:not(:checked):disabled + span {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}


.myspan {
	height: 14px;
	width: 46px;
	font-family: Arial;
	font-size: 12px;
	font-weight: bold;
	line-height: 14px;
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Website</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/e7ece1a81e.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="switch.css">
    <link rel="stylesheet" type="text/css" href="css/checkbox.css">
</head>

<body>
    
    <br><br>
    <div class="container">
       <h1>Checkbox and Switch</h1>

        <div class="row justify-content-md-center">
            <div class="col-12 ">
                <span id="s1" class="switchText-active myspan">PICKUP</span>
                <label class="switch js-switch">
                    <input class="js-check" name="switch" type="checkbox">
                    <span class="slider round"></span>
                </label>
                <span id="s2" class="switchText-notActive myspan">DELIVERY</span>
            </div>
        </div>
    </div>
    <br>
    <br>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="script.js"></script>
    <script src="switch.js"></script>
</body></html>

相关问题
最新问题