Question

如何在鼠标悬停的链接周围显示一些符号？例如，我有一些链接：

<ul>
    <li><a href="#"><span>&LT;</span>Home<span>&GT;</span></a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>

我的意思是我想要这些“＆lt;＆gt;”从链接后面慢慢扩展然后我胡佛。在我移开鼠标后再回来隐藏。我知道css过渡和动画。我尝试了很多方法，但它不起作用。最好的结果是我使用小图像和不透明度。但它不是我想要的。我希望从链接后面有一些漂亮的流畅运动。

修改好吧，经过谷歌一段时间后，我遇到了这个网站here。我尝试在菜单链接中制作类似的东西。我不是要求完整的代码，只是指向正确的方向:)也许它只用JavaScript完成？

Answer 1

1）首先在模板中为生成链接的每个链接添加符号

 <li>
     <span class="slide">&lt;</span>
     <a href ....>
     <span class="sldie">&gt;</span>
 </li>

2）默认情况下设置隐藏，并在悬停时显示

 .slide { 
      display: none;
 }

 li:hover .slide { 
      display: inline;
 }

3）添加CSS3过渡代码以滑动隐藏的div，就像这里http://atomicrobotdesign.com/blog/htmlcss/slide-up-captions-using-css3-transitions/

一样

该代码仅用于示例目的，而不是来自实际工作的产品。但是使用这些指针，您应该能够一起解析效果。

Answer 2

这种方法的变体是使用“可见性”代替“显示”

.slide { 
      visibility: none;
 }

 li:hover .slide { 
      visibility: inline;
 }

这样，添加符号时文本不会移位。根据您的情况，这可能看起来不正确。

Answer 3

只要您现在可以使用Firefox中的转换，并且可以等待Webkit团队启用生成内容的转换，这将是我的建议：

body { background: #000; } 
ul li a { text-decoration: none; color: #fff; font-size: 2rem;
font-family: Avenir, sans-serif; text-transform: uppercase; }

ul li a:after, ul li a:before { opacity: 0; font-size: 1.5rem; position: relative; 
top: -.25rem; color: #f00; z-index: -2; } 

ul li a:before { content: "<"; right: -2rem; } 
ul li a:after { content: ">"; left: -2rem; }
ul li a:hover:before, ul li a:hover:after { opacity: 1; transition: .7s all linear; } 
ul li a:hover:before { right: 0; } 
ul li a:hover:after { left: 0; } 

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Paintings</a></li>
</ul>

Code in Dabblet。我希望这有帮助！

Answer 4

使用：after和：之前在css

<强> HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#">Paintings</a></li>
</ul>

<强> CSS

body{background:black}
li a{
    white-space: nowrap;
    color: transparent;
    display: block;
    text-transform: uppercase;
    text-align: center;
    text-shadow: 0px 0px 0px #fff;
    letter-spacing: 1px;
    -moz-transform: scale(0.5); 
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5); 
    -webkit-transform: scale(0.5); 
    transform: scale(0.5); 
    -webkit-transition: all 0.6s linear;
    -moz-transition: all 0.6s linear;
    -o-transition: all 0.6s linear;
    -ms-transition: all 0.6s linear;
    transition: all 0.6s linear;  text-decoration:none
}
li a:hover{
    text-shadow: 0px 0px 1px #fff;
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    transform: scale(1); 
    text-decoration:none
}
li a:hover:before{content:"<"}
li a:hover:after{content:">"}

DEMO

但这不支持IE，但适用于现代浏览器。

回答2

嗯，我浏览了你所指的网站，我发现它是由纯css制成的（css中有2张图片）。找到下面的演示（CSS很长，所以我不会在这里粘贴）

<强> LIVE DEMO 2

如何扩大胡佛的链接？添加“＆lt;” “＆gt;” 中链接周围的符号？

4 个答案: