Hello Rajneesh,
Here is a small sample if it's do be done using pure css.
<!DOCTYPE html>
<html>
<head>
<style>
p:hover {font-weight:bold;}
p:hover b {color: #f00;}
</style>
</head>
<body>
<p>Mouse over to make me <b>Bold</b></p>
</body>
</html>
Here is another example but usable only in CSS3 compliant browsers.
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
@-webkit-keyframes shake {
0%, 100% {-webkit-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@-moz-keyframes shake {
0%, 100% {-moz-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
}
@-o-keyframes shake {
0%, 100% {-o-transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {-o-transform: translateX(-10px);}
20%, 40%, 60%, 80% {-o-transform: translateX(10px);}
}
@keyframes shake {
0%, 100% {transform: translateX(0);}
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
20%, 40%, 60%, 80% {transform: translateX(10px);}
}
p:hover {font-weight:bold;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-name: shake;
-moz-animation-name: shake;
-o-animation-name: shake;
animation-name: shake;
}
p:hover b {color: #f00;}
</style>
</head>
<body>
<p>Mouse over to make me <b>Bold</b></p>
</body>
</html>
Regards,
Submit an article or tip