【问题标题】:Javascript navigation hover effectJavascript导航悬停效果
【发布时间】:2016-02-03 04:21:19
【问题描述】:

有谁知道如何在我的 HTML/CSS 文档中实现this web page 上显示的导航悬停效果?上述页面使用的是 WordPress 主题,但我想将绿色效果添加到我的通用网页中,并且还可以更改颜色。

附:我以前从未使用过Javascript。 (做个好人。)

【问题讨论】:

  • 可以通过css3过渡来完成。无需编写javascript。

标签: javascript html css menu navigationbar


【解决方案1】:

试试这个:

CSS

ul li{
 list-style:none;
}
ul li a{
transition:all 0.2s ease-out;
padding:5px;
border-radius:5px
}

ul li a:hover{
  background-color:#&dcc0e;
}

HTML:

<ul>
<li>
   <a>Hello</a>
</li>
</ul>

【讨论】:

    【解决方案2】:

    这个不需要任何js。您可以像这样使用 css 过渡创建效果。

    div{
                    width: auto;
                    float: left;
                }
                a{
                    color: red;
                    text-decoration: none;
                    padding: 5px 20px;
                    float: left;
                    position: relative;
                }
                a:hover{
                    color:#FFF;
                }
                a:after{
                    content: '';
                    background: red;
                    position: absolute;
                    top: 50%;
                    right: 5%;
                    bottom: 50%;
                    left: 5%;
                    border-radius: 3px;
                    transition: all .1s;
                    z-index: -1;
                }
                a:hover:after{
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                }
    &lt;div&gt;&lt;a href="javaScript:void(0);"&gt;menu&lt;/a&gt;&lt;/div&gt;

    【讨论】:

      猜你喜欢
      • 2018-10-06
      • 1970-01-01
      • 2020-02-07
      • 2021-12-22
      • 1970-01-01
      • 2012-12-28
      • 1970-01-01
      • 2011-06-20
      • 2011-04-14
      相关资源
      最近更新 更多