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

I'm trying to add an action to a clicked div that only appears when hovered (it's the "back side" of a flipping div, which is orange in the example below).

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

The action I'm trying to trigger is expanding the orange div so it covers all the other divs.

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

This is the code I'm having an issue with: http://jsfiddle.net/y892fqq1/2/

这是我遇到问题的代码: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>

(Sorry for the long lines of codes!)

(对不起,代号很长!)

Here's a post I found that fits the most to my issue : https://*.com/a/15489601 (shortcut to code: http://jsfiddle.net/85mJN/4/), but when I try that, it doesn't seem to work ...

这是我发现的最符合我的问题的帖子:https://*.com/a/15489601(代码的快捷方式:http://jsfiddle.net/85mJN/4/),但当我尝试时,它似乎不起作用......

Does anyone have any idea how I could proceed?

有谁知道我怎么办?

Many thanks, Adrian

非常感谢,阿德里安

1 个解决方案

#1

how about adding a class on click, which will style the rotating thing accordingly?

如何在点击上添加一个类,这将相应地调整旋转的东西?

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