css - Applying hover image effect on inline images within divs -

I have inserted 6 images on one page, in each of the div squares are shown inline. I have also given an image to each image. I want to know the best way to change every image in a different image on hover. I am thinking that I can violate some rules of hover or something or use wrong syntax. Any ideas would be great.

The easiest way is to forget all the images at once. Set your Devices as blocks and keep each Div with the ID:

  & lt; Style & gt; Div {display: block; Height: 100px; Width: 100px; Float: left;} #id {background: url ("first_image_url.jpg");} #id: hover {background: url ("second_image_url.jpg");} & lt; / Style & gt;  

You should be enough to move forward in one direction with this. You may also want to consider using javascript to do rollover, but generally it is considered overkill due to the normal background switch implementation.