如何使圖像的另一面可點擊

親愛的朋友我感謝您抽出時間，我有四個元素在旋轉時在y軸上旋轉。它們被包含在四個div中，它們本身被包含在div封裝中。當我將鼠標懸停在其上時，我想讓背面圖片可點擊，但我不確定如何操作。在我看來，它不是一個好的形式來包裝整個div在一個甚至可能不起作用的錨標籤中。我原本在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*/

來源

2014-04-20 user3528719

1.您的演示不僅在Firefox和IE10工作，對於其他瀏覽器，您將需要transform/-ms-transform/-webkit-transform; 2.如果您只需要將圖片點擊懸停，您可以在背面div或jQuery上使用onclick函數。 – Godinall

確實如此，但現在沒有辦法用CSS來做，因爲一旦我可以做到這一點，它就成爲一個相對較小的問題，使它跨瀏覽器兼容：D – user3528719

好吧，要解決這個問題，只用純CSS需要添加顯示：塊;到你的標籤，然後你可以添加寬度和高度，它會被點擊，因爲它是默認的內聯元素，這就是爲什麼當它沒有內容時你不能點擊它。另外提醒你想想你的div的z-index。他們現在不能正常工作。 – Godinall

IDK如果這是問題的分開，但有一個<div>並不比符號的少開始時div>

來源

2014-04-20 15:19:31 user3421750

肯定是的，生病讓它排序，非常感謝。 – user3528719

如何使圖像的另一面可點擊

回答

相關問題