css3 전환, 작동하지 않음 오른쪽 탐색 열의 너비 전환

Question

오른쪽 탐색 열의 너비 전환이 작동하지 않는 이유는 무엇일까요?

단순한 데모를 만들면 (호버 칼럼 폭 증가시) 작동하지만, 전체 프로젝트에서는 칼럼이 왼쪽으로 이동하지만 너비는 변하지 않습니다.

죄송합니다. 오류 및 데모가있는 링크를 제거했습니다. 이유가있을 경우 코드를 찾은 후 코드 예제를 사용하여 솔루션을 설명하기 때문에 데모에 대한 링크를 제거했습니다.

Answer 1

I는 ; 또는 , 누락 대신 전이 정의 ; 구문의 작은 실수로 오류

1)를 재생할 수있다.

2) 요소에 width! important를 둡니다. 그러나 전환시에는 중요하지 않습니다.

몇 가지 전환 목록에서 실수를하면 실수 (~)가 실수 (오른쪽 탐색 막대 너비가 주어진 양만큼 증가)가 될 때까지 전환됩니다. 나머지 전환은 작동하지 않습니다 (width) (오른쪽 탐색 막대는 왼쪽으로 이동하지만 너비는 그대로 유지됩니다).

//ERROR 
@media only screen and (max-width: 600px) { 
    div.navWrapT:hover { 
     left:30vw; width:70vw, right:1px; //will give this error 
    } 
} 

//CORRECT 

@media only screen and (max-width: 600px) { 
    div.navWrapT:hover { 
     left:30vw; width:70vw !important; right:1px; 
    } 
} 

전체 코드 (당신은 바로 완전히 제거 할 수는 작업을 진행하게) :

<style> 

div.sliderWrap { 
    height: 100vh; 
    width: 90vw; 
    position: relative; 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    overflow : hidden; 
    z-index : 100; 
} 

.nav { width : 70vw; } 

div.navWrapT { 
    position :absolute; 
    top : 0px; 
    left : 70vw; 
    width : 28vw; 
    right: 1px; 
    border: 0px; /*3px solid violet; //remove the border to make it working */ 
    margin : 5px; 
    padding : 0px; 
    height : 100%; 
    background : green; 
    transition: width ease-out 1s, left ease-out 1s, right ease-out 1s; 
     /* */ 
} 

a.aBtn { 
    display: block; 
    border: 1px solid black; 
    position: relative; 
    /* transition: 0.5s all; */ 
    /* transition-delay: 1s; */ 
    height: 30px; 
    width : 100%; 
    /* transition: width ease-out 1s, left ease-out 1s; */ 
} 

span.navDescr { 
    color : back; 
} 


@media only screen and (max-width: 600px) { 
    div.navWrapT:hover { 
     left:30vw; width:70vw, right:1px; 
     /* */ 
    } 
} 
</style> 




    <div class="outestWrap" > 
    <div class="sliderWrap" > 
    <span class="nav"> 
<span class="nav"> 

<div class="navWrapT" > 

<a href="#nav0_1" class="aBtn"><span class="navDescr">Main</span></a> 

<a href="#nav0_2" class="aBtn"><span class="navDescr">Location, map</span></a> 

<a href="#nav0_3" class="aBtn"><span class="navDescr">Room types, suites </span></a> 

<a href="#nav0_4" class="aBtn"><span class="navDescr">Busines, office, work room </span></a> 

<a href="#nav0_5" class="aBtn"><span class="navDescr">Parking </span></a> 

<a href="#nav0_6" class="aBtn"><span class="navDescr">Services </span></a> 

<a href="#nav0_7" class="aBtn"><span class="navDescr">Policies </span></a> 

<a href="#nav0_8" class="aBtn"><span class="navDescr">Food/cloth/hygiene </span></a> 

<a href="#nav0_9" class="aBtn"><span class="navDescr">Transport </span></a> 

<a href="#nav0_10" class="aBtn"><span class="navDescr">Sport </span></a> 

<a href="#nav0_11" class="aBtn"><span class="navDescr">Awards, history, about </span></a> 

</div> 

     <ul><li></li><li></li></ul> 

</span></span> 
     </div> </div>