When we browse many websites, we will see that on some websites, when your mouse moves over the text in the navigation bar, you will feel that the words are moving, or the color of the font will change, or
there will be an overline. Look at me You understand the effect of the navigation bar on my blog. Today, San Shao will tell you how to achieve this.
In fact, this is very simple, it is actually implemented using CSS, please follow my steps, Let' Go!
1. Enter your personal portal management, select personal portal settings, then select template selection, select custom CSS to enter .
2. Have you seen some CSS code? Please find the following code:
body{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
width: 956px;
background-color: #336666;
font-size: 12px;
color: #666666;
}#navi_bar a:link {
/*Navigation bar text color*/
}#navi_bar a:visited {}
Okay, the following are the key steps:
add the following code after this:
#navi_bar a:hover{color:#000000; font-weight:bold;text-decoration:blink;background:#FF0000;font-size:18px}
#navi_bar a{display:block}
Code description: 1. color represents the color of the word when the mouse is moved, and text-decoration represents the modification effect of the text. The attributes that can be selected are (none means that the
hyperlink
has no underline, underline has an underline, and overline adds a hyperlink to the text.Overline, change to line-through to add a line to the hyperlinked text, and blink to make the text
flash
). The background indicates the color when the mouse reaches it.font-size represents the size of the font. If you want to make the navigation bar dynamic, the font size here is
larger than the font in navi_bar a:link. The font size in the CSS definition is 14px, so we need to choose a font larger than 14px. .
2.navi_bar a{display:block} means that the color fills the entire table, otherwise only text can be filled.