I am creating a menu bar at the moment which uses 2 images designed in Photoshop , one image is normal and one image is on hover effect.

I have seen that I can use both css and JQuery to create the hover effect, I find CSS much easier to use for example :

image {
background-image:url ..
}

image:hover {
background-image:url ...}

on hover just change the image whereas the jquery code is a little bit longer I believe

If anyone of you could tell me the different between using CSS and JQuery in this case and what would be the JQuery code of doing the same thing that I have done above using CSS .

Thanks in advance

I am creating a menu bar at the moment which uses 2 images designed in Photoshop , one image is normal and one image is on hover effect.

I have seen that I can use both css and JQuery to create the hover effect, I find CSS much easier to use for example :

image {
background-image:url ..
}

image:hover {
background-image:url ...}

on hover just change the image whereas the jquery code is a little bit longer I believe

If anyone of you could tell me the different between using CSS and JQuery in this case and what would be the JQuery code of doing the same thing that I have done above using CSS .

Thanks in advance

• javascript
• php
• jquery
• html
• css

• 3 CSS doesn't require JavaScript to be enabled or an entire library to work. Plus users rarely, if ever, turn off CSS. – John Conde Commented Nov 4, 2013 at 21:44
• If all you want to do is change an image on hover then you want to use CSS. jQuery allows you to run arbitrary code on hover, like issuing ajax requests and modifying the dom structure. It certainly doesn't apply to this particular use case. – Mike Edwards Commented Nov 4, 2013 at 21:47
• general rule of thumb... look to using css rules first. Toggling classes on eleements is very straightforward. Adding inline css is also easy....but undoing it can be tricky sometimes if you have overlapping inline style sources in code – charlietfl Commented Nov 4, 2013 at 21:48
• Ook so I better use CSS, do I ? – Diego Claudiu Commented Nov 4, 2013 at 21:48
• @PHP CSS is probably better, unless you need to support older browsers like IE6 that don't understand image hover. btw you certainly mean img rather than image. – Christophe Commented Nov 4, 2013 at 22:03

8 Answers 8

A simple answer, whenerver you can do something using CSS instead of Scripting, do it.

It makes future code editing much easier as well, since you know where the hover is applied, but with scripts, you may find it difficult to trace the event handlers, especially if they are applied using plex selectors that dont mention the name of the element you are trying to edit.

Someone else can ment on jQuery, but for all purposes, if you can achieve your desired effect with CSS, stick with that. The less scripts firing off in the background, the better.

Note, I would use a sprite for your image and change the background position on hover, so that you aren't getting the quick flash as the browser loads the hover image.

Stack the two images into one single JPG/Gif. If it's 50x100px,

image {
   background:url('/images/img.jpg') no-repeat;
}

image:hover {
   background:url('/images/img.jpg') no-repeat 0 -50px;
}

It depends on the css. certain stuff isn't going to be supported by older browsers, if you need to support them. You should almost always do it in css instead of js if possible, with caveats of of course. Sometimes it is far more plicated in css. other times the browsers may not implement the things you need, (like animation)

Generally though if you can do it in css, and you are sure that all the browsers you need to support, can use your solution then go for the style solution over js

Well using jQuery you could use the mouseenter() and mouseleave() functions to add a class and remove a class accordingly, thus giving you the hover effect, but this would take more code than just CSS as you'd need the jQuery code, plus the CSS style to go along with the class you're adding.

One thing to bare in mind though if you're bothered about mobile users is that hover effects basically add another click for a user trying to get somewhere. The first click will initialise the hover state, the next click will direct a user to the url. Whereas with jQuery this won't be a problem, however, if a user has Javascript turned off in their browser it will be an issue, so a fallback will need to be taken in to consideration.

So it just depends which approach you want to take.

CSS is much quicker because it has fewer steps to machine code. Javascript, which is all that jQuery is, has to go through an engine like Chromes V8. Therefore it is much slower than CSS. You shouldn't waste time rewriting logic in javascript that is already built into the browser, as is the case with the CSS :hover pseudo selector.

To do

image {
  background-image: url(image1.jpg);
}

image:hover {
  background-image: url(image2.jpg);
}

in jQuery would be:

$(image).on( 'mouseenter', function(){
  $(this).css({ background-image : 'url(image2.png)' })
}).on( 'mouseleave', function(){
  $(this).css({ background-image : 'url(image1.png)' })
});

Try googling a bit more... "use jquery to apply on hover affect" ->

  $("p").hover(function(){
    $("p").css("background-image","url ..");
    },function(){
    $("p").css("background-image","url ......");
  });

Source: http://www.w3schools./jquery/event_hover.asp

As for the other part of your question, the above anwser pretty much covered it.

You can read Benefits of using CSS3 vs JQuery here enter link description here. But that doesn't mean you can't use JQuery.

If you just want to change the image, CSS is the best way to do. It's much faster and more simple not only on implement but also when running website than using jQuery. However, if you want a little bit effect when changing the images (like fade or moving effect...), then jQuery must be your choice.