Change Background Color

User Rating: / 0
PoorBest 

Hi, in this tutorial i will present you one effect by change background color when mouse is over the container, you can change the color, the size of the container, the time etc.

Create  a new html page and in the head section copy the code:

<style>
body {
      background:#ccc;
      text-align:left;
      color:#333;
      width:800px;
      font-size:14px;
      font-family:georgia, 'time new romans', serif;
      margin:0 auto;
      padding:0;
}
a{
      color:#333;
      text-decoration:none
}
      a:focus {
      outline: none;
}

h1 {
      font-size: 34px;
      font-family: verdana, helvetica, arial, sans-serif;
      letter-spacing:-2px;
      color:#dff161;
      font-weight:700;
      padding:20px 0 0;
      text-shadow:0 1px 1px #333;
}

h2 {
      font-size: 24px;
      font-family: verdana, helvetica, arial, sans-serif;
      color:#333;
      font-weight: 400;
      padding: 0 0 10px;
      text-shadow:0 1px 1px #708819;
      }

h3, h3 a{
      font-size:14px;
      font-family:verdana, helvetica, arial, sans-serif;
      letter-spacing:-1px;
      color:#333;
      font-weight: 700;
      text-transform:uppercase;
      margin:0;
      padding:8px 0 8px 0;
}


p {
     color:#333;
     float:left;
     line-height:22px;
     margin:5px;
     padding:0 0 10px;
}

#container {
     margin: 0;
     padding: 0;
}



.boxes {
     background:#fff;
     border:1px solid #ccc;
     float:left;
     padding:10px;
     position:relative;
     width:710px;
}

img {
     border:5px solid #CCCCCC;
}



div.info {
     border-bottom:1px solid #CCCCCC;
     float:left;
     margin:0;
     padding:0;
     width:100%;
}

.block {
     color:#0066CC;
     float:left;
     overflow:hidden;
     position:relative;
     width:710px;
}

.block h4, .block h4 a{
     color:#333333;
     font-size:11px;
     padding:5px 0;
     text-shadow:0 1px 1px #DFF161;
     text-transform:uppercase;
     }



</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
<!-- include Google's AJAX API loader -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<script type="text/javascript">
            $(document).ready(function(){
                $(".boxes").hover(function() {
                $(this).stop().animate({ backgroundColor: "#a7bf51"}, 800);
                },function() {
                $(this).stop().animate({ backgroundColor: "#ffffff" }, 800);
                });
   
         });
</script>

That was all!

This script has been developed by http://devsnippets.com !