變換一個div而不改變裏面的圖標

Question

我試圖在使用CSS變換屬性懸停時變換div。

我有變換正在做我想要的，但不幸的是它應用變換（邏輯上我猜），到div的內容我只想應用變換div而不是底層內容（此圖標爲案件）。

我在這裏看到了一些方法，包括向圖標應用反轉，但是當我這樣做時，它只是增加了效果。

這裏是my code：

.MsgBtnIcon { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 7px; 
 
    padding: 0px; 
 
} 
 
#transDemo2 div { 
 
    display: block; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-color: #03A9F4; 
 
    width: 75px; 
 
    height: 75px; 
 
    text-align: center; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -ms-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 
#transDemo2 div:hover, 
 
#transDemo2 div.hover_effect { 
 
    -webkit-transform: rotate(360deg) scale(2, 2) translateX(-19px) translateY(-19px); 
 
    -moz-transform: rotate(360deg) scale(2, 2) translateX(-19px) translateY(-19px); 
 
    -ms-transform: rotate(360deg) scale(2, 2) translateX(-19px) translateY(-19px); 
 
    transform: rotate(360deg) scale(2, 2) translateX(-19px) translateY(-19px); 
 
}

<script src="https://use.fontawesome.com/353bc64522.js"></script> 
 
<div id="transDemo2"> 
 
    <div class="hover"> 
 
    <i class="fa fa-plus fa-4x MsgBtnIcon" aria-hidden="true"></i> 
 
    </div> 
 
</div>

Answer 1

您可以通過移動MsgBtnIcon是懸停DIV的孩子，並添加pointer-events: none做到這一點。

Updated fiddle example

.MsgBtnIcon { 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 7px; 
 
    padding: 0px; 
 
    pointer-events: none; 
 
} 
 
#transDemo2 div { 
 
    display: block; 
 
    position: fixed; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-color: #03A9F4; 
 
    width: 75px; 
 
    height: 75px; 
 
    text-align:center; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -ms-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 

 
} 
 

 
#transDemo2 div:hover, #transDemo2 div.hover_effect { 
 
    -webkit-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px); 
 
    -moz-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px); 
 
    -ms-transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px); 
 
    transform:rotate(360deg) scale(2,2) translateX(-19px) translateY(-19px); 
 
}

<script src="https://use.fontawesome.com/353bc64522.js"></script> 
 

 
<div id="transDemo2"> 
 
    <div class="hover"></div> 
 
    <i class="fa fa-plus fa-4x MsgBtnIcon" aria-hidden="true"></i> 
 
</div>

Answer 2

而不是反對變換戰鬥，也許這將是更好的只是分開是受到來自部分改造是撐unnafected部分： https://jsfiddle.net/m1hqzaqf/

<script src="https://use.fontawesome.com/353bc64522.js"></script> 

<div id="transDemo2"> 
    <div class="hover"> 
    </div> 
    <i class="fa fa-plus fa-4x MsgBtnIcon" aria-hidden="true">X</i> 
</div> 

Afte無論如何，在這種情況下，'懸停'div似乎只是作爲背景而存在。