懸停時的圖像轉換

Question

我有兩個不同的問題。第一個真的很刺激。我試圖將文本與第一個框內的圖像對齊，以便它們以並排方式並排排列。我不知道我做錯了什麼，我不想使用浮動。

其次，我試圖在懸停的x軸上獲取圖像transform: translate。事情是，我想transform上的圖像.extra-box:hover ...不是在實際的圖像上，但我只希望圖像移動。我無法弄清楚這一點。

我在做什麼錯？

#extra { 
 
\t margin: 25px auto; 
 
\t width: 460px; 
 
\t height: auto; 
 
} 
 
.extra-box { 
 
\t position: relative; 
 
\t width: 40%; 
 
\t padding: 8px; 
 
\t border-radius: 3px; 
 
\t /*border: 1px solid #739BAF;*/ 
 
\t border: 2px solid black; 
 
\t display: inline-block; 
 
\t background: none; 
 
\t transition: 0.5s ease; 
 
} 
 
.extra-box:hover { 
 
\t border: 2px solid red; 
 
\t transition: 0.5s ease; 
 
} 
 
.extra-box:first-child { 
 
\t margin-left: 0; 
 
\t width: 40%; 
 
\t margin-right: 10%; 
 
} 
 
.extra-box:last-child { 
 
\t width: 40%; 
 
} 
 
.extra-box a { 
 
\t text-decoration: none; 
 
} 
 
.extra-box-text { 
 
\t color: black; 
 
\t font-size: 1em; 
 
\t display: inline-block; 
 
\t width: auto; 
 
} 
 
.extra-box-icon img { 
 
\t padding-left: 5px; 
 
\t width: 15px; 
 
\t height: auto; 
 
\t display: inline-block; 
 
\t -webkit-transition: all .5 ease-in-out; 
 
    transition: all .5 ease-in-out; 
 
\t /*transform: translateX(30px); 
 
\t -webkit-transform: translateX(30px);*/ 
 
}

\t \t <div id="extra"><div class="extra-box"> 
 
\t \t \t \t <a href="contact"> 
 
\t \t \t \t \t <div class="extra-box-text">Need help?<br>Contact Us Now</div><div class="extra-box-icon"><img src="icons/right-arrow.png"></div> 
 
\t \t \t \t </a> 
 
\t \t \t </div><div class="extra-box"> 
 
\t \t \t \t <a href="register"> 
 
\t \t \t \t \t <div class="extra-box-text">Need an account?<br>Register Now</div> 
 
\t \t \t \t </a> 
 
\t \t \t </div> 
 
\t \t </div>

Answer 1

至於其他的答案中指出，你錯過了一個顯示：inline-block，但問題出在.extra-box -icon

我還添加了變換圖像：（參見CSS的開頭）

.extra-box-icon { 
 
    display: inline-block; 
 
} 
 
img { 
 
    transition: transform 1s; 
 
} 
 
.extra-box:hover img { 
 
    transform: translateX(-100px); 
 
} 
 
#extra { 
 
    margin: 25px auto; 
 
    width: 460px; 
 
    height: auto; 
 
} 
 
.extra-box { 
 
    position: relative; 
 
    width: 40%; 
 
    padding: 8px; 
 
    border-radius: 3px; 
 
    /*border: 1px solid #739BAF;*/ 
 
    border: 2px solid black; 
 
    display: inline-block; 
 
    background: none; 
 
    transition: 0.5s ease; 
 
} 
 
.extra-box:hover { 
 
    border: 2px solid red; 
 
    transition: 0.5s ease; 
 
} 
 
.extra-box:first-child { 
 
    margin-left: 0; 
 
    width: 40%; 
 
    margin-right: 10%; 
 
} 
 
.extra-box:last-child { 
 
    width: 40%; 
 
} 
 
.extra-box a { 
 
    text-decoration: none; 
 
} 
 
.extra-box-text { 
 
    color: black; 
 
    font-size: 1em; 
 
    display: inline-block; 
 
    width: auto; 
 
} 
 
.extra-box-icon img { 
 
    padding-left: 5px; 
 
    width: 15px; 
 
    height: auto; 
 
    display: inline-block; 
 
    -webkit-transition: all .5 ease-in-out; 
 
    transition: all .5 ease-in-out; 
 
    /*transform: translateX(30px); 
 
\t -webkit-transform: translateX(30px);*/ 
 
}

<div id="extra"> 
 
    <div class="extra-box"> 
 
    <a href="contact"> 
 
     <div class="extra-box-text">Need help? 
 
     <br>Contact Us Now</div> 
 
     <div class="extra-box-icon"> 
 
     <img src="icons/right-arrow.png"> 
 
     </div> 
 
    </a> 
 
    </div> 
 
    <div class="extra-box"> 
 
    <a href="register"> 
 
     <div class="extra-box-text">Need an account? 
 
     <br>Register Now</div> 
 
    </a> 
 
    </div> 
 
</div>

Answer 2

添加vertical-align:top;在.extra箱級，將其調整到同一水平。

Answer 3

固定取向的問題，如果你不希望使用浮點，可以改變.extra箱文本和特箱文本IMG的顯示屬性設置爲inline-block的

.extra-box-text, .extra-box-text img{ 
    display:inline-block; 
    width: /*adjust as needed*/ 
} 

應對動畫，我建議你設置圖像本身.extra盒的背景，那麼您需要更改背景位置上懸停

希望這有助於