單擊時擴展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/ ），但是當我嘗試時，它似乎不起作用...

有人知道我該如何進行嗎？

非常感謝，阿德里安

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>