title: How to Implement hover selector with javascript to div's
body: <p>I have a div container which has 3 sub divs as columns.
  There is a background image into the container and i would like when i mouseover on each sub div ,the background of <strong>this</strong> div to change with a specific image.I wish on mouse out the image to be removed and be in the previous status.
  i did this with css using hover, but as  i said before it doesn't work in IE9(as custom view within intranet ).The error in console says <em>SEC7115: :visited and :link styles can only differ by color. Some styles were not applied to :visited.</em>  but i do not use :visited or :link.</p>
  
  <p>Im new in javascript and i would really appreciate your assistance.
  Thank you in advance.
  My code is :
  </p>
  
  <pre><code>#container {
  width:500px;
  height:350px;
  border: 1px solid #092D53;  
  margin-left:1cm;
  margin-top:1cm;
  border-radius:5px;
  background-image: url('image.png');
  
  }
  
  #column1 {
  
  position: relative;
  float: left;
  width: 32%;
  height: 100%;
  border-right: 1px solid #092D53;
  
  }
  #column2 {
  
  position: relative;
  float: left;
  width: 34%;
  height: 100%;
  border-right: 1px solid #092D53;
  
  }
  #column3 {
  position: relative;
  float:left;
  width:32%;
  height:100%;
  
  }
  #button1 {  
  align: middle;
  margin-bottom: -45px;
  display: table-cell;
  position: absolute;
  width: 95%;
  height: 40px;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  color: #092D53;
  font-family: Verdana;
  font-size: 14px;
  
  
  
  
  }
  #button2 {
  position: absolute;
  margin-left: 3px;
  margin-bottom: -45px;
  width:95%;
  align:middle;
      text-decoration: none;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  line-height: 40px;
  color: #092D53;
  font-family: Verdana;
  font-size: 14px;
  
  }
  #button3 {
  position: absolute;
  margin-left: 5px;
  margin-bottom: -45px;
  width: 98%;
  height:40px;
  align:middle;
  text-decoration: none;
  text-align: center; 
  vertical-align: middle;
  color: #092D53;
  font-family: Verdana;
  font-size: 14px;
  
  }
  
  
  
  #column1:hover {    
  background-image: url('one.png');
  opacity:0.2;
  }
  #column2:hover {    
  background-image: url('two.png');
  opacity:0.2;
  }
  
  #column3:hover {    
  background-image: url('three.png');
  opacity:0.2;
  }
  </code></pre>
  
  
  
          
           
              
              Workflow 1
              
          
          
  
          
          
              
              Workflow 2
              
          
          
  
          
          
              
              Workflow 3