Hi *.*,
My friends always say my taste in designing is not enough Ha ha But i always try to make best out of that he he.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.myDiv
{
border:1px solid red;
width:500px;
height:500px;
background-color:#FFFFFF;
}
div.myDiv:hover
{
border:1px solid red;
background-color:#D2D2D2;
width:500px;
height:500px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="myDiv">
</div>
</form>
</body>
</html>
Yup,This is a CSS-only solution that works nicely by using what is known as a "psuedo class" (that ":hover" suffix after the classname). It works well in Chrome & Firefox, but not in IE 6. So i need the resort of a Javascript solution:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
div.myDiv
{
border:1px solid red;
width:50px;
height:50px;
}
div.myDivHover
{
border:1px solid red;
background-color:#00ff00;
width:50px;
height:50px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="myDiv" onmouseover="this.className='myDivHover';" onmouseout="this.className='myDiv';">
</div>
</form>
</body>
</html>
This uses the javascript event handlers "onmouseover" and "onmouseout" to change the css class name of the div. This should work on all browsers.So i touched the finish line in a smart way, isit??
Stay tune...
Have a nice day... 'N happy Coding :)
No comments:
Post a Comment