• 1
  • 2
Home > Tips

How to Change Text Background on Mouse Hover?

This is the two effects we want to achieve.

 

 

In the first effect, the anchor text background color will be changed on mouse hover.

In the second effect, the anchor text background image will be changed on mouse hover.

 

 How to Change Anchor Text Background Color on Mouse Hover?

In this sample, the anchor text background color will be changed to blue and the font color will be change to white.

We can use achieve this effect by using the code below (We can add a div outside the a tag named as: change-color):

 

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change text background on mouse hover?</title>
<style>
.change-color a{ color:#000}/* NoteLink color is black */
.change-color a:hover{color:#FFF; background:#00F}
/* Note: The anchor text background color will be changed to blue and the font color will be change to white*/
</style>
</head>
<body>
<div class='change-color'>
<a href='http://www.slicemaker.com'>This is text.</a>
</div>
</body>
</html>

 

                                                                                 

 

 

 How to Change Anchor Text Background Image on Mouse Hover?

 

In this sample, the anchor text background image will be changed to another image and the font color will be change to white.

We can use achieve this effect by using the code below (We can add a div outside the a tag named as: change-image):

 

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Change text background on mouse hover?</title>
<style>
.change-image a{ color:#000; padding:10px 10px; line-height:30px}/* NoteLink color is black */
.change-image a:hover{color:#FFF; background:url(bj.gif) no-repeat center}
/* Note: The anchor text background image will be changed to another image and the font color will be change to white*/
</head>
<body>
<div class='change-image'>
<a href='http://www.slicemaker.com/'>This is text.</a>
</div>
</body>
</html>

 

                                                                                  

 

 Terms of Use

This template is created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the template and then edit it for their own use. If you are interested in this template, please feel free to download it. If you have problem understanding or editing the template, please feel free to contact our support team (support@slicemaker.com) for help.

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0