单击时展开div（具有悬停翻转效果）

Question

我正在尝试向单击的div添加一个动作，该动作仅在悬停时出现（它是翻转div的“背面”，在下面的示例中为橙色）。

我试图触发的动作是扩展橙色div，以便覆盖所有其他div。

这是我遇到问题的代码：http://jsfiddle.net/y892fqq1/2/

table {
  width: 200px;
  height: 200px;
  border-collapse: collapse;
}
.front,
.back,
.flip,
.flip-container {
  height: 100%;
  width: 100%;
}
.flip-container {
  perspective: 1000;
}
.flip-container:hover .flip,
.flip-container.hover .flip {
  transform: rotateY(180deg);
}
.flip {
  transition: 1s;
  transform-style: preserve-3d;
  position: relative;
}
.front,
.back {
  top: 0;
  left: 0;
  backface-visibility: hidden;
  position: absolute;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
  background-color: purple;
}
.back {
  transform: rotateY(180deg);
  background-color: orange;
}

<div class="content">
  <table>
    <tr>
      <td>
        <div class="flip-container">
          <div class="flip">
            <div class="front"></div>
            <div class="back" onclick="expand()"></div>
          </div>
        </div>
      </td>
      <td>
        <div class="flip-container">
          <div class="flip">
            <div class="front"></div>
            <div class="back" onclick="expand()"></div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="flip-container">
          <div class="flip">
            <div class="front"></div>
            <div class="back" onclick="expand()"></div>
          </div>
        </div>
      </td>
      <td>
        <div class="flip-container">
          <div class="flip">
            <div class="front"></div>
            <div class="back" onclick="expand()"></div>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

（很抱歉代码很长！）

以下是我发现的最符合我的问题的帖子：https://stackoverflow.com/a/15489601（代码的快捷方式：http://jsfiddle.net/85mJN/4/），但是当我尝试这个时，它似乎不起作用...... < / p>

有没有人知道我该怎么办？

非常感谢， 阿德里安

Answer 1

如何在点击时添加一个类，这会相应地调整旋转的东西？

＆＃13;

＆＃13;

$(function(){
    $(".flip").click(function(){ 
        $(this).toggleClass("expanded");
    });
});

＆＃13;

*{
    margin:0;
}
.expanded{
    transition: 0s  !important;
    width:200px !important;
    height:200px !important;
    z-index:10 !important;
    position:absolute !important;
    transform: rotateY(180deg);
}
table {
    width: 200px;
    height: 200px;
    border-collapse: collapse;
}
.front, .back, .flip, .flip-container {
    height:100%;
    width:100%;
    left:0;
    top:0;
}
.flip-container {
    perspective: 1000;
}
.flip-container:not(.expanded):hover .flip, .flip-container.hover .flip {
    transform: rotateY(180deg);
}
.flip {
    transition: 1s;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    top: 0;
    left: 0;
    backface-visibility: hidden;
    position: absolute;
}
.front {
    z-index: 2;
    transform: rotateY(0deg);
    background-color:purple;
}
.back {
    transform: rotateY(180deg);
    background-color:orange;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <table>
    <tr>
      <td>
        <div class="flip-container">
          <div class="flip">
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
      </td>
      <td>
        <div class="flip-container">
          <div class="flip">
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="flip-container">
          <div class="flip">
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
      </td>
      <td>
        <div class="flip-container">
          <div class="flip">
            <div class="front"></div>
            <div class="back"></div>
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;