0

如何在鼠标悬停时让一些符号出现在我的链接周围？例如我有一些链接：

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

我的意思是我希望这些“< >”从链接后面慢慢扩展，然后将其悬停。并在我将鼠标移开后返回并隐藏。我知道 CSS 过渡和动画。我尝试了很多方法，但它不起作用。最好的结果是当我使用小图像和不透明度时。但这不是我想要的。我想从链接后面进行一些漂亮的平滑运动。

编辑：好吧，在谷歌一段时间后，我在这里 遇到了这个网站。我尝试制作与他的菜单链接类似的东西。我不是要完整的代码，只是指出我正确的方向:) 也许它只用 JavaScript 完成？

4

4 回答 4

0

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/

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

于 2012-10-21T22:02:59.993 回答
0

一种变体是使用“可见性”代替“显示”

.slide { 
      visibility: none;
 }

 li:hover .slide { 
      visibility: inline;
 }

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

于 2012-10-21T22:36:37.603 回答
0

只要你现在对 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>

Dabblet 中的代码。我希望这有帮助！

于 2012-10-21T23:47:58.063 回答
0

在 CSS 中使用 :after 和 :before

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:">"}​

演示

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

答案 2

好吧，我浏览了您所指的网站，发现它是由纯 css 制成的（css 中使用了 2 个图像）。找到下面的 Demo（CSS 很长，这里就不贴了）

现场演示 2

于 2012-10-22T06:13:49.410 回答