如何通过单击按钮来旋转图像而不是：悬停？

Question

所以我有一个图像，而不是通过使用：hover旋转，我想在侧面放置一个按钮，单击时将旋转该图像。例如，在线商店的衬衫图像，我希望有一个旋转该图像的按钮，以便可以显示背面。

Answer 1

根据您的标记结构，可以完全使用CSS。

以下是使用复选框的FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put(key,object); 属性的一种方法运行代码段以查看其工作原理：

:checked

.checkme{
    display:none;
}
.checkme + label{
    cursor:pointer;
    background:#efefef;
    padding:4px 8px;
    margin-bottom:5px;
}

.checkme + label > .back{
    display:none;
}
.checkme:checked + label > .front{
    display:none;
}
.checkme:checked + label > .back{
    display:inline;
}

.checkme + label + .imgbox{
    width:150px;
    height:150px;
    background-image:url("http://www.placehold.it/150x150");
}
.checkme:checked + label + .imgbox{
    background-image:url("http://www.placehold.it/149x149");
}