При использовании псевдо-класса: цель, как я могу отменить анимацию?

Question

Я работаю над выпадающим меню, и когда я нажимаю на изображение, он масштабируется и вращается. Все это хорошо работает, но когда я снова нажимаю на него, я хочу, чтобы он вернулся в нормальное состояние.

#arrow { 
    z-index: 2; 
    position: absolute; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

#arrow:target { 
    transform: scale(1.2) rotate(45deg); 
    -ms-transform: scale(1.2) rotate(45deg); 
    -webkit-transform: scale(1.2) rotate(45deg); 
    -moz-transform: scale(1.2) rotate(45deg); 
    -o-transform: scale(1.2) rotate(45deg); 
    margin-top: 1em; 
} 

Здесь jsfiddle: Click me =)

Answer 1

Единственный способ «обратить вспять» приложение :target, о котором я знаю, это изменить фрагмент в ссылке (или иным образом добавить новый class или что-то еще).

Помимо элементов <input>, нет возможности внести изменения в состояние без легкого применения JavaScript.

UPDATED DEMO

Редактировать

Here's an updated demo использованием <input type="checkbox"> с :checked вместо :target, что не связано с JavaScript. YMMV в зависимости от требуемой поддержки браузера.

#arrow { 
    position: absolute; 
    left: -9999px; /* hide the checkbox off-screen */ 
    z-index: 2; 
} 

#arrow:before { 
    width: 96px; 
    height: 104px; 
    position: absolute; 
    top: 2px; 
    left: 9999px; /* undo the checkbox offset */ 
    display: block; 
    content: ' '; 
    background: url(http://s23.postimg.org/s6m0zb4ev/arrow.png) no-repeat; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

#arrow:checked:before { 
    -moz-transform: scale(1.2) rotate(45deg); 
    -webkit-transform: scale(1.2) rotate(45deg); 
    transform: scale(1.2) rotate(45deg); 
} 

Answer 2

Селектор :target просто применяет стили к изображению, когда изображение является целевым, что она находится на щелчок якоря как изображения ID является HREF якоря.

Таким образом, нажав на якорь снова, он по-прежнему остается одной и той же целью, поэтому стили будут по-прежнему применяться, а не переключать их. Это точное ожидаемое поведение.

Можете ли вы не просто использовать JS для переключения класса?

Answer 3

Вы можете установить другой якорь под стрелкой, и после того, как стрелка была нажата, поменять Z-индекс, так что следующий щелчок идет к этому.

Тогда активным будет «noarrow», а не стрелка.

body{ 
background-color: black; 
} 

.logo{ 
background:transparent url('http://s23.postimg.org/7xyndl53r/trans_bg.png') repeat center top; 
height: 200px; 
} 

.arrow{ 
position: relative; 
z-index:2;} 

.text{ 
position: absolute; 
z-index: 1; 
margin-top: 1.6em !important; 
margin-left: 3em;} 



#arrow img { 
z-index: 2; 
position: absolute; 
-webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 

#arrow:target img, #arrow:focus img { 
transform: scale(1.2) rotate(45deg); 
-ms-transform: scale(1.2) rotate(45deg); 
-webkit-transform: scale(1.2) rotate(45deg); 
margin-top: 1em; 
} 

#arrow:target, #arrow:target div , #arrow:target img { 
z-index: -99;  
} 


#text{ 
z-index: 1; 
position: absolute; 
} 

.noarrow { 
    width: 200px;  
    height: 200px; 
    z-index: 1; 
} 

demo