悬停时的图像转换

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盒的背景，那么您需要更改背景位置上悬停

希望这有助于