1

我正在处理下拉菜单，当我单击图像时，它会缩放和旋转。这一切都很好，但是当我再次单击它时，我希望它恢复到正常状态。

#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：点击我=）

4

4 回答 4

2

“反转”:target我所知道的应用程序的唯一方法是更改​​链接中的片段（或添加新的class或其他内容）。

除了一些<input>元素之外，如果没有 JavaScript 的轻量级应用，就无法进行状态更改。

UPDATED DEMO

编辑

这是一个使用<input type="checkbox">with: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);  
}
于 2013-09-04T12:39:09.063 回答
1

当:target图像是目标时，选择器只是将样式应用于图像，它是在单击锚点时，因为图像 ID 是锚点的 href。

因此，再次单击锚点，它仍然是同一个目标，因此仍然会应用样式，而不是切换它们。这是确切的预期行为。

你不能只用JS来切换一个类吗？

于 2013-09-04T12:34:12.947 回答
1

您可以在箭头下设置另一个锚点，单击箭头后，交换 z-index 以便下一次单击转到该锚点。

那么活动将是“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;
}

演示

于 2013-09-04T17:56:39.047 回答
0

我用另一个锚来关闭 div。例如<a href="#open">Open</a>，<a href="#close">Close</a> 这将反转动画。

演示https://jsfiddle.net/z6nya3c4/2/

于 2019-03-02T01:24:39.150 回答