Question

我有以下代码允许我将鼠标悬停在div上。将鼠标悬停在显示“Front Content”的div上时，它将翻转并显示“Back Content”。反之亦然。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <style>
        .flipdiv {
            position: relative;
            width: 220px;
            height: 160px;
            perspective: 500px;
        }

            .flipdiv.v:hover .front, .flipdiv.v.flip .front {
                transform: rotateX(180deg);
            }

            .flipdiv.v:hover .back, .flipdiv.v.flip .back {
                transform: rotateX(0deg);
            }

            .flipdiv.v .back {
                transform: rotateX(-180deg);
            }


            .flipdiv .front, .flipdiv .back {
                position: absolute;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                transition: all 0.5s ease-in;
                color: white;
                background-color: #000;
                padding: 10px;
                backface-visibility: hidden;
            }
    </style>
    </head>
<body>
    <div class="flipdiv v">
        <div class="front">
            Front Content
        </div>
        <div class="back">
            Back Content
        </div>
    </div>
</body>
</html>

但是，我正在尝试将这段代码从悬停更改为onclick。但是不能这样做。知道我怎么能修改代码来onclick吗？

提前致谢。

Answer 1

您的代码使用public static int findSmallest( final int[] numbers, final String toReturn ) { int smallest = numbers[0]; for (int i = 0; i < numbers.length; i++) { if (numbers[i] <= smallest) { smallest = numbers[i]; } } System.out.println(smallest); return smallest; } css伪类来触发动画。要切换到使用点击，请使用真正的类，并使用JavaScript打开和关闭该类。

将您的css中:hover的所有实例更改为.flipdiv.v:hover。然后，创建一个单击处理程序以在div上切换类。

＆＃13;

.flipdiv.v.showBack

＆＃13;

onload = function(){
  document.querySelector(".flipdiv.v").onclick = flipdivClicked;
};
function flipdivClicked(e) {
  if (/\bshowBack\b/.test(this.className)) {
    this.className = this.className.replace(/ ?\bshowBack\b/g, "");
  }
  else {
    this.className += " showBack";
  }
}

＆＃13;

.flipdiv {
  position: relative;
  width: 220px;
  height: 160px;
  perspective: 500px;
}

.flipdiv.v.showBack .front, .flipdiv.v.flip .front {
  transform: rotateX(180deg);
}

.flipdiv.v.showBack .back, .flipdiv.v.flip .back {
  transform: rotateX(0deg);
}

.flipdiv.v .back {
  transform: rotateX(-180deg);
}


.flipdiv .front, .flipdiv .back {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  color: white;
  background-color: #000;
  padding: 10px;
  backface-visibility: hidden;
}

＆＃13;

Answer 2

＆＃13;

.flipdiv {
            position: relative;
            width: 220px;
            height: 160px;
            perspective: 500px;
        }

            .flipdiv.v.clicked .front, .flipdiv.v.flip .front {
                transform: rotateX(180deg);
            }

            .flipdiv.v.clicked .back, .flipdiv.v.flip .back {
                transform: rotateX(0deg);
            }

            .flipdiv.v .back {
                transform: rotateX(-180deg);
            }


            .flipdiv .front, .flipdiv .back {
                position: absolute;
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                transition: all 0.5s ease-in;
                color: white;
                background-color: #000;
                padding: 10px;
                backface-visibility: hidden;
            }

＆＃13;

<div class="flipdiv v" onclick="this.classList.toggle('clicked')">
        <div class="front">
            Front Content
        </div>
        <div class="back">
            Back Content
        </div>
    </div>

＆＃13;

Onclick功能而不是悬停

2 个答案: