Нажмите и удерживайте нажатой кнопку мыши или щелкнув мышью

Question

Я понимаю, что состояние :active в некоторой степени, но я не знаю, как преобразовать мой box1, нажав (не удерживая). Вместо этого, чтобы преобразовать, мне нужно щелкнуть и удерживать окно на всю продолжительность преобразования.

https://jsfiddle.net/kzmhtkog/4/

.wrap { 
 
    width: 100%; 
 
    height:400px; 
 
    overflow:hidden; 
 
} 
 

 
#box1 { 
 
    background-color:red; 
 
    text-align:left; 
 
    cursor: pointer; 
 
    -webkit-transition: width 1s; 
 
    transition: width 1s; 
 
} 
 

 
#box1:active { 
 
    width: 100%; 
 
    background-color: red; 
 

 
} 
 

 
.floatleft { 
 
    float:left; 
 
    width: 33.33%; 
 
    background-color: black; 
 
    height: 400px; 
 
}

<div class="wrap"> 
 
    <div class="floatleft" id="box1"> 
 
    </div> 
 
</div>

Answer 1

Вы должны использовать JQuery или JavaScript.

$('#box1').click(function() { 
 
    $(this).toggleClass('active'); 
 
});

.wrap {       
 
    width: 100%;     
 
    height:400px;     
 
    overflow:hidden;    
 
}        
 
           
 
#box1 {       
 
    background-color:red;   
 
    text-align:left;    
 
    cursor: pointer;    
 
    -webkit-transition: width 1s; 
 
    transition: width 1s;   
 
}        
 
           
 
#box1.active {     
 
    width: 100%;     
 
    background-color: red;   
 
           
 
}        
 
           
 
.floatleft {      
 
    float:left;     
 
    width: 33.33%;     
 
    background-color: black;  
 
    height: 400px;     
 
}       

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrap">     
 
    <div class="floatleft" id="box1"> 
 
    </div>        
 
</div>