javascript - 单击时展开一个 div(具有悬停翻转效果)

Question

我正在尝试向单击的 div 添加一个 Action ，该 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/)，但是当我尝试这样做时，它似乎不起作用......

有人知道我该如何继续吗？

非常感谢， 阿德里安

Answer 1

如何在点击时添加一个类，它会相应地设置旋转的样式？

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

*{
    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;
}

<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>