当图标悬停时，滑入文字

Question

我一直想得到一个效果，其中。

1. 图标字体显示，旁边的文字被隐藏。
2. 当鼠标悬停在一个图标上时，滑入被隐藏的文本。从右边滑入。

这是我目前试过的效果。

(因为要花很多时间，所以用一些随机的键盘符号来代替图标)http:/jsfiddle.neth9EX9

ul li { display: inline-block; list-style-type: none; margin-right: 10px; background: #eee; }
ul li span { display: inline-block; }
ul li a { display: inline-block; width: 0; height: 0; overflow: hidden;  }
ul li:hover a  { transition: all 1s ease-out; width: 100%; height: auto; }

这就是我想达到的效果。评论的文字和和宽度从右边滑落。但是除了这个图标之外，还有其他的图标，我希望也可以在背景宽度扩大的时候滑动这些图标。我希望当背景的宽度扩大时，也可以滑动这些图标。

那么这是否可能，如果可以，如何实现？

Answer 1

这是你的演示，在CSS上做了一些工作。这是一个有点长篇大论，但得到的工作，没有JavaScript只使用CSS过渡的动画。出于某种原因，它的动画效果更好，使用 max-width 而不是 width 但我不知道为什么。

演示一下。 http:/jsfiddle.netMarcelh9EX91。

当正确实现时，你可能想使用一个额外的包装元素来代替 <a> 因为你会有多个 <a> 例如 "标签 "按钮中的元素。

Answer 2

我想这就是你要找的：HTML。

<div id="holder">
    <div id="comment-button">♥
        <div id="comment-button-text">Comment</div>
    </div>

</div>

JS:

$('#comment-button').hover(
  function () {
      $(this).animate({
  width: '70px',
},1000)
      $('#comment-button-text').animate({
  width: '70px',
},1000)
  },
  function () {
         $(this).animate({
  width: '11px',
},1000)
          $('#comment-button-text').animate({
  width: '0px',
},1000)

  }
);

和一些样式。

#comment-button{
background-color: #ababab;
width: 11px;
border-radius: 15px;
height: 15px;
padding: 10px;
color: red;
}
#comment-button-text{
   width: 0px;
display: block;
overflow: hidden;
position: absolute;
top: 16px;
left: 31px;
color: #8a8a8a;
}

这里是工作中的fiddle: http:/jsfiddle.netxs4Nt1

Answer 3

你可以通过使用jQuery的hover()函数来实现，这里有一些演示代码。

<script type="text/javascript">
$(".icon").hover(function(){ $(".text").show("slide", { direction: "left" }, 1000);}, function(){ $(".text").show("slide", { direction: "right" }, 1000);});
</script>

当然，你必须像你提到的那样，将.text的显示设置为none，并且不要忘记将jQuery脚本包含在你的HTML的头部部分。

ps.你可以用其他的CSS选择器来代替.icon和.text来选择你的图标或文本，例如ul li a，所以$(".icon".hover会变成$("ul li a".hover)。 你可以用任何其他CSS选择器替换.icon和.text来选择你的图标或文本，例如ul li a，所以$(".icon").hover将变成$("ul li a").hover。

Answer 4

我知道这是一个老帖子，但这可能会帮助新来的人... 这是一个修复和改进 @SeekingKnowledge的 帖子（链接）。以下是我的代码版本，解释一下。

$("#closeText").hide(); $("#close").hover(function(){ $("#closeText").show("slide", { direction: "left" }, 400);}, function(){ $("#closeText").hide("slide", { direction: "left" }, 400);});

替换 #close 与你的图标元素的ID，并更改所有三个 #closeText 与包含您的文本ID的元素。你可以自定义动画时间，改变目前400的值（以毫秒为单位），然而，这对我的网站来说是一个很好的速度。你还需要设置 #close CSS的z-index比z-index多2个。#closeTest. 记得要用jQuery! 这里是 我如何在我的网站上使用它的一个页面（链接到CodePen）。希望这能帮助任何在这里寻找答案的人 Luka S