Hi all,i wonder does the following website use javascript to handle the product desc and image on mouse over?Does anyone ever create like that?May i ask for an example or tutorial?Thanks a lot...

1 answer


Many sites do use JavaScript for such things, but it is important to know how to implement it in CSS first. To do this, you will have two classes: one for normal, and one for hover. The hover will be in addition to the normal class. Once you like how it works, leave the hover class off and add the :hover pseudo class to your stylesheet.

<div class="color_blocks">
  <p>This is some text.</p>
  <p>This is some more text.</p>
  <p>..and even more text.</p>

.color_blocks p {
  background: gray;
  color: black;

.color_blocks p:hover, .color_blocks_hover_p {
  background: red;

You can then use JavaScript later to add the new class (.color_blocks_hover_p) to the elements using onouseover/onmouseout or in JQuery with .hover().

Answered over 8 years ago by kainosnous
  • Thanks a lot kainosnous handoyo over 8 years ago