如何使图像的反面可点击

Question

亲爱的朋友，我感谢您抽出宝贵的时间，我将鼠标悬停在y轴上旋转了四个元素。 它们包含在四个div中，它们本身包含在div包装器中。 当我将鼠标悬停在背面图像上时，我想使它可点击，但我不确定该怎么做。 在我看来，将整个div包裹在一个锚标签中并不是一种好方法，甚至可能行不通。 我本来在div内包含一个可点击的图像，但是在我看来，这似乎也不是一个好的形式，尽管我怀疑目前这可能是唯一的方法，我不知道。 你可以在这里看到我的问题，

CSS脚蹼的网站

我将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>中没有小于号