Question

我有一个导航，我想在鼠标上显示图像，同时文本应该显示在图像上。

预期输出：对于图像，宽度＆amp;高度动画应该以0％到100％开始moue over和on mouse out宽度值应该从100％减少到0％，动画应该在li的中心水平对齐。

我尝试了以下代码 DEMO

  <ul id="sdt_menu1" class="sdt_menu1">
  <li>
    <a href="#" class="nav-link"><img src="http://dummyimage.com/130/cccccc/000000.jpg&text=Dummy+Image" alt=""/><span class="sdt_link1">Home</span>
    </a>
  </li>
  <li>
    <a href="repository.html" class="nav-link"> <img src="http://dummyimage.com/130/cccccc/000000.jpg&text=Dummy+Image" alt=""/><span class="sdt_link1">Contact</span> 
    </a>
  </li>

</ul>

我得到了什么：现在，我几乎创建了放大，即从0到100的宽度，但是在鼠标输出时，它只是空白而不是宽度100到0

Answer 1

您无法设置auto宽度的动画（过渡只能在数值范围内设置动画）：

ul.sdt_menu1 li:hover img {
    width: 100%;
    height: 35px;
    width: auto; /*remove this line*/
    box-shadow: 0px 0px 0px gray;
    -webkit-box-shadow: 0px 0px 0px gray;
    -moz-box-shadow: 0px 0px 0px gray;
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
}

Updated fiddle

Answer 2

基本上您希望图像替换li？

如果是这样，将overflow: hidden;添加到ul.sdt_menu1 li{} 将解决您的问题

中心对齐放大/缩小图像动画

2 个答案: