7

我一直试图在哪里产生效果：

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

这是我迄今为止尝试过的：

（由于需要很长时间，用一些随机键盘符号替换图标） http://jsfiddle.net/h9EX9/

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; }

在此处输入图像描述

这就是我想要达到的效果。注释的文本和宽度从右侧滑出。但除此之外还有其他图标。我希望当背景宽度扩大时也可以滑动它们。

那么这可能吗，如果可以的话怎么办？

4

4 回答 4

10

这是您在 CSS 上完成的一些工作的演示。它有点冗长，但无需 JavaScript 即可完成工作，仅使用 CSS 动画过渡。出于某种原因，它使用max-width而不是动画效果更好，width但我不确定为什么。

演示：http: //jsfiddle.net/Marcel/h9EX9/1/

正确实施时，您可能希望使用额外的包装元素来制作动画，而不是<a>因为“标签”按钮中有多个<a>元素。

于 2013-05-05T01:00:32.387 回答
1

您可以使用 jQuery hover() 函数来做到这一点，这里有一些演示代码：

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

当然，您必须将 .text 的显示设置为无，并且不要忘记在 HTML 的 head 部分中包含 jQuery 脚本

ps：您可以用任何其他CSS选择器替换 .icon 和 .text 来选择您的图标或文本示例 ul li a 所以 $(".icon").hover 将变为 $("ul li a").hover

于 2013-05-04T23:37:27.923 回答
0

我认为这就是您所关注的：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;
}

这是工作小提琴：http: //jsfiddle.net/xs4Nt/1/

于 2013-05-04T23:47:20.630 回答
0

我知道这是一篇旧帖子，但这可能会对来到这里的新人有所帮助...

这是对 [@SeekingKnowledge's][1] 帖子（已链接）的修复和改进。下面是我的代码版本，解释。 
$("#closeText").hide(); $("#close").hover(function(){ $("#closeText").show("slide", { direction: "left" }, 400);}, function(){ $("#closeText").hide("slide", { direction: "left" }, 400);});

替换#close为您的图标元素的 ID，并将所有三个更改#closeText为包含您的文本 ID 的元素。您可以通过更改当前值为 400（以毫秒为单位）的值来自定义动画时间，但是，这对我的网站来说是一个不错的速度。您还需要将#closeCSS 的 z-index 设置为比#closeText.
记得获取 jQuery！

这是我在我的网站上的一个页面中使用它的方法（链接到 CodePen）。

希望这可以帮助任何在这里寻找答案的人！
卢卡小号

于 2020-06-02T13:13:50.190 回答