html - 如何使图像的反面可点击

Question

亲爱的 friend ，感谢您抽出宝贵时间，我有四个元素，当鼠标悬停在上面时，它们会在 y 轴上旋转。它们包含在四个 div 中，这些 div 本身包含在一个 div 包装器中。当我将鼠标悬停在背面图像上时，我想让它可以点击，但我不确定如何执行此操作。在我看来，将整个 div 包装在一个甚至可能不起作用的 anchor 标记中并不是一个好的形式。我最初在 div 中包含一个可点击的图像，但在我看来这也不是很好的形式，尽管我怀疑目前这可能是唯一的方式，我不知道。你可以在这里看到我的问题，

site with CSS flippers

我包括了相关的 html 和 CSS 部分，非常感谢您花时间。

<div id="frontflipwrapper"> 
<div class="frontflip3D"> 
<div id="openings_back" class="back_page_flip"><a href="#"></a></div>
<div id="openings" class="front_page_flip"></div>
</div> 
<div class="frontflip3D"> 
<div id="middle_game_back" class="back_page_flip"></div> 
<div id="middle_game"class="front_page_flip"></div> 
</div> 
<div class="frontflip3D"> 
    <div id="end_game_back" class="back_page_flip"></div> 
    <div id="end_game"class="front_page_flip"></div> 
</div>
<div class="frontflip3D"> 
<div id="strategy_back" class="back_page_flip"></div> 
<div id="strategy"class="front_page_flip"></div> 
</div>
</div> 

/* front page flipper*/

#frontflipwrapper{
margin:10px auto;
width:100%;
height:140px;
}

.frontflip3D{ 
    width:100px; 
    height:100px; 
margin:4.2%;
float:left; 
} 
.frontflip3D > .front_page_flip{ 
position:absolute; 
transform: perspective( 600px ) rotateY( 0deg ); 
background:#ccc;
border-radius:4px;  
width:10%; 
height:100px; 
backface-visibility: hidden; 
transition: transform .5s linear 0s; 
} 
.frontflip3D > .back_page_flip{ 
position:absolute; 
transform: perspective( 600px ) rotateY( 180deg ); 
background:#80bfff;
border-radius:4px;  
width:10%; 
height:100px; 
backface-visibility: hidden; 
transition: transform .5s linear 0s; 
} 
.frontflip3D:hover > .front_page_flip{ 
transform: perspective( 600px ) rotateY( -180deg ); 
} 

.frontflip3D:hover > .back_page_flip{ 
transform: perspective( 600px ) rotateY( 0deg ); 
} 

#openings{
background-image:url(pawn.png)
}

#middle_game{
background-image:url(knight.png)
}
#end_game{
background-image:url(king.png)
}
#strategy{
background-image:url(rook.png)
}

#openings_back{
background-image:url(img/opening_back.png)

}

#middle_game_back{
background-image:url(img/middle_game_back.png)
}

#end_game_back{
background-image:url(img/endgame_back.png)
}

#strategy_back{
background-image:url(img/strategy_back.png)
}

/* end of front page flipper*/

Answer 1

Idk 如果这是问题的一部分，但有一个 <div>开头没有小于号 div>