Home > Developer > Web Develop
div CSS Mouse hover anchor text hyperlink text background color or picture change (body sense music)
CSS mouse hover hyperlink text on the background changes, the mouse through the text link (hover), the text of the background image changes (background image or background color).
The background color or background picture appears or changes the tutorial when the mouse hovers over the hyperlink text. (Body feeling music)
This div CSS layout tip is actually a CSS style for a tag made by the mouse. Use the following code:
a{...} original hyperlink default Style setting
A:hover{...} Hyperlink anchor text CSS style (extended read: IE6 hover) When the mouse hovers over
One, link text without background mouse over hover to appear background color-TOP (body sense music)
When the mouse passes through a text hyperlink with no background color and background image (hover), the background color of the hyperlink anchor text text background appears.
Use the CSS property Word:
background+ Specific color values
We implement the mouse through a link CSS background color change, we have the hyperlink a tag plus a div box css named ". Divcss5-abc"
1. Full instance HTML source code
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>a Background color Change </title>
<style>
. DIVCSS5-ABC a{Color: #000}/* CSS Comment Description: Hyperlink color is black */(Body music)
. DIVCSS5-ABC a:hover{background: #00F; color: #FFF}
/* CSS Comment Description: the mouse hover hyperlink when the font color is white, the background is blue */
</style>
<body>
<div class= "DIVCSS5-ABC" >
Welcome to <a href= "http://www.divcss5.com/" >divcss5</a>
</div>
</body>
2, background color change instance
Mouse over background color blue font White
Mouse over background color blue font White
The "a:hover" background color appears blue when the mouse passes over the a tag.
Second, the mouse through the text link background into a picture-TOP
When the mouse is over a hyperlinked text, the text background takes the picture as the background.
We use the example to achieve the mouse through a link background changes to the picture, we have the hyperlink a tag plus a div box css named ". Divcss5-def"
1. Complete HTML+CSS Code
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>a Background Change </title>
<style>
. Divcss5-def a{Color: #000; padding:10px 10px; line-height:30px}/* CSS Comment Description: The hyperlink color is black */
. divcss5-def A:hover{color: #FFF; Background:url (bj.gif) no-repeat Center}
/* CSS Comment Description: Mouse over hover hyperlink when font color is white, background is picture */
</style>
<body>
<div class= "Divcss5-def" >
Welcome to <a href= "http://www.divcss5.com/" >divcss5</a>
</div>
</body>
2, text link mouse through the background to change the picture instance
The background changes to a picture when the mouse hovers over the hyperlink text
A picture effect appears on the background when the mouse hovers over the hyperlink text
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
