Today I mainly use the hover selector. Move the mouse over to see the effect.
One. Ordinary navigation bar
- Home
- Content
- Service
- Team
- Contact
For this ordinary navigation bar, the color only changes when the mouse slides over it, so the idea becomes very simple.
(1) Use ul tag layout
(2) Mouse passing event
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="demo1"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Content<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Service<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Team<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>Contact<span style="color: #0000ff;"></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>
<span style="color: #800000;">*</span>{<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> list-style</span>:<span style="color: #0000ff;">none</span>;<span style="color: #ff0000;"> text-decoration</span>:<span style="color: #0000ff;">none</span>; }<span style="color: #800000;"> a</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#fff</span>; }<span style="color: #800000;"> #demo1</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">600px</span>; }<span style="color: #800000;"> #demo1 ul li</span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;">left</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">50px</span>;<span style="color: #ff0000;"> text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;">#ccc</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;">50px</span>;<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#FFF</span>; }<span style="color: #800000;"> #demo1 ul li:hover</span>{<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;">#999</span>; }
(2) Bracket navigation bar
- Home
- Content
- Service
- Team
- Contact
I won’t say much about the layout of the navigation bar here. You can see that brackets will appear from the text when the mouse passes over it. Idea:
(1) When there is no mouse passing event, the brackets are actually there, but they are invisible in the middle of the text
(2) When the mouse passes over, the brackets move from the middle to both sides, and change from invisible to displayed.
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="demo2"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Content<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Service<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Team<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>Contact<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="color: #800000;">#demo2</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">600px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">50px</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">20px auto</span>; }<span style="color: #800000;"> #demo2 ul li</span>{<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;">left</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">100px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">50px</span>;<span style="color: #ff0000;"> text-align</span>:<span style="color: #0000ff;">center</span>;<span style="color: #ff0000;"> line-height</span>:<span style="color: #0000ff;">50px</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;">#000</span>; }<span style="color: #800000;"> #demo2 ul li a:before</span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;">"["</span>;<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;">10px</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">translateX(20px)</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;">translateX(20px)</span>;<span style="color: #ff0000;"> -moz-transform</span>:<span style="color: #0000ff;">translateX(20px)</span>;<span style="color: #ff0000;"> -ms-transform</span>:<span style="color: #0000ff;">translateX(20px)</span>; }<span style="color: #800000;"> #demo2 ul li a:after</span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;">"]"</span>;<span style="color: #ff0000;"> margin-left</span>:<span style="color: #0000ff;">10px</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">translateX(-20px)</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;">translateX(-20px)</span>;<span style="color: #ff0000;"> -moz-transform</span>:<span style="color: #0000ff;">translateX(-20px)</span>;<span style="color: #ff0000;"> -ms-transform</span>:<span style="color: #0000ff;">translateX(-20px)</span>; }<span style="color: #800000;"> #demo2 ul li a:before,#demo2 ul li a:after</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">inline-block</span>;<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> transition</span>:<span style="color: #0000ff;">transform 0.3s, opacity 0.2s</span>;<span style="color: #ff0000;"> -moz-transition</span>:<span style="color: #0000ff;">transform 0.3s, opacity 0.2s</span>;<span style="color: #ff0000;"> -webkit-transition</span>:<span style="color: #0000ff;">transform 0.3s, opacity 0.2s</span>;<span style="color: #ff0000;"> -ms-transition</span>:<span style="color: #0000ff;">transform 0.3s, opacity 0.2s</span>; }<span style="color: #800000;"> #demo2 ul li a:hover::before,#demo2 ul li a:hover::after,#demo2 ul li a:focus::before,#demo2 ul li a:focus::after </span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translateX(0px)</span>;<span style="color: #ff0000;"> -moz-transform</span>:<span style="color: #0000ff;"> translateX(0px)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translateX(0px)</span>; }
Three. Sliding navigation bar
- Home
- Content
- Service
- Team
- Contact
从演示效果来看要注意两点
(1)鼠标经过时有横向从上到下
(2)鼠标经过时文字从上到下并且变换颜色
这就和上一个例子很像了
(1)横线其实是存在的,只不过鼠标没有经过时是在文字上方且透明的,鼠标经过时横线由上到下。
(2)文字这里就要定义一个动画了,因为在鼠标经过时它体现了三种状态:
①文字从现位置划下
②文字从出现在上方
③文字从上方滑到现位置
<span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="demo3"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>Home<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>Content<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>Service<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>Team<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>Contact<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
<span style="color: #800000;">#demo3 ul li</span>{<span style="color: #ff0000;"> float</span>:<span style="color: #0000ff;">left</span>;<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">0 25px</span>;<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;">relative</span>; }<span style="color: #800000;"> #demo3 ul li a</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#D8761E</span>;<span style="color: #ff0000;"> font-family</span>:<span style="color: #0000ff;">'Righteous', cursive</span>;<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">block</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;">10px 0</span>; }<span style="color: #800000;"> #demo3 ul li span</span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;">block</span>; }<span style="color: #800000;"> #demo3 ul li a:before</span>{<span style="color: #ff0000;"> content</span>:<span style="color: #0000ff;">""</span>;<span style="color: #ff0000;"> position</span>:<span style="color: #0000ff;">absolute</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">100%</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">3px</span>;<span style="color: #ff0000;"> background</span>:<span style="color: #0000ff;">#D8761E</span>;<span style="color: #ff0000;"> bottom</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, -40px, 0)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate3d(0, -40px, 0)</span>;<span style="color: #ff0000;"> -webkit-transition</span>:<span style="color: #0000ff;"> -webkit-transform 0s 0.3s, opacity 0.2s</span>;<span style="color: #ff0000;"> transition</span>:<span style="color: #0000ff;"> transform 0s 0.3s, opacity 0.2s</span>; }<span style="color: #800000;"> #demo3 ul li a:hover::before</span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;">1</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;"> -webkit-transition</span>:<span style="color: #0000ff;"> -webkit-transform 0.5s, opacity 0.1s</span>;<span style="color: #ff0000;"> transition</span>:<span style="color: #0000ff;"> transform 0.5s, opacity 0.1s</span>;<span style="color: #ff0000;"> -webkit-transition-timing-function</span>:<span style="color: #0000ff;"> cubic-bezier(0.4, 0, 0.2, 1)</span>;<span style="color: #ff0000;"> transition-timing-function</span>:<span style="color: #0000ff;"> cubic-bezier(0.4, 0, 0.2, 1)</span>; }<span style="color: #800000;"> #demo3 ul li a:hover span</span>{<span style="color: #ff0000;"> color</span>:<span style="color: #0000ff;">#510301</span>;<span style="color: #ff0000;"> -webkit-animation</span>:<span style="color: #0000ff;"> anim-francisco 0.3s forwards</span>;<span style="color: #ff0000;"> animation</span>:<span style="color: #0000ff;"> anim-francisco 0.3s forwards</span>; }<span style="color: #800000;"> @-webkit-keyframes anim-francisco </span>{<span style="color: #ff0000;"> 50% { opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 100%, 0)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate3d(0, 100%, 0)</span>; }<span style="color: #800000;"> 51% </span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, -100%, 0)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate3d(0, -100%, 0)</span>; }<span style="color: #800000;"> 100% </span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>; }<span style="color: #800000;"> } @keyframes anim-francisco </span>{<span style="color: #ff0000;"> 50% { opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 100%, 0)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate3d(0, 100%, 0)</span>; }<span style="color: #800000;"> 51% </span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 0</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, -100%, 0)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate3d(0, -100%, 0)</span>; }<span style="color: #800000;"> 100% </span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 1</span>;<span style="color: #ff0000;"> -webkit-transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>;<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;"> translate3d(0, 0, 0)</span>; }<span style="color: #800000;"> }</span>
这里注意的是不能给标签设置宽高,因为一旦设置宽高会影响文字滑动路线,变得很夸张。这里加span也是这个原因,鼠标经过a时让span以a为参照进行滑动。
里面的标签就不解释了,自己查效果会更好哦。
我好无奈呀,用这个显示效果a标签和li的默认样式竟然不能取消,谁能告诉我为什么/(ㄒoㄒ)/~~ 不过自己编译的话在浏览器里是正常的

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver Mac version
Visual web development tools

SublimeText3 Linux new version
SublimeText3 Linux latest version

SublimeText3 Chinese version
Chinese version, very easy to use

SublimeText3 English version
Recommended: Win version, supports code prompts!

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
