Question

我的盒子在悬停时翻转。你可以在这里查看。 http://rehabhousedeals.com/shortcode/

我在盒子另一侧的右上角添加了红色图标。我希望用户点击这个图标框应该翻转。实际上这是移动视图。用户应该能够通过单击此图标在正面翻转。这是我的css中具有悬停效果的容器类。

.card-container:not(.manual-flip):hover .card,
.card-container.hover.manual-flip .card{
    -webkit-transform: rotateY( 180deg );
-moz-transform: rotateY( 180deg );
 -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}


.card-container.static:hover .card,
.card-container.static.hover .card {
    -webkit-transform: none;
-moz-transform: none;
 -o-transform: none;
    transform: none;
}

请帮我解决这个问题。

Answer 1

如果我理解你的问题，我可能会有一个解决方案。我不确定这是否可以单独在css中完成，但在JavaScript中你只需在悬停时添加一个类并在单击图标时将其删除

类似这样的事情

 box.addEventListener('mouseenter', function() {
   this.classList.add('boxHover');
 });

并在点击图标时将其删除

icon.addEventListener('click', function() {
  box.classList.remove('boxHover');
});

这是一个例子 https://jsfiddle.net/vqk8Ld46/

Answer 2

仅限CSS的解决方案 - 您可以使用复选框，并使用：checked伪选择器和兄弟选择器进行翻转/解除翻转。要控制卡片中的复选框，您可以将std::string标记与printf("animal's name before it is assigned to a zookeeper: %s\n", animal.getName().c_str());属性一起使用：

<label>

for

点击

2 个答案: