What is the difference between using CSS or Jquery in this case

Question

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

CSS doesn't require JavaScript to be enabled or an entire library to work. Plus users rarely, if ever, turn off CSS. — John Conde
– 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
– 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
– charlietfl, 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
– Christophe, Commented Nov 4, 2013 at 22:03

Rainer Plumer · Accepted Answer · 2013-11-04 21:46:59Z

2

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 complex selectors that dont mention the name of the element you are trying to edit.

answered Nov 4, 2013 at 21:46

Rainer Plumer

3,7533 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Diego Claudiu Over a year ago

Ook, I see , so I better use CSS instead of javascript whenever I can do :) thank you for your answer :)

Josh Powell Over a year ago

There is one thing that you do need to consider when going with CSS or jQuery, Browser support. Some of the new features that are coming out with CSS3 like gradients, animations, fade in/out are not going to be supported on IE8 and below. If this is a major concern for yourself then that would be the only time to use scripting over css.

Nathan S · Accepted Answer · 2013-11-04 21:48:03Z

2

Someone else can comment 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;
}

answered Nov 4, 2013 at 21:48

Nathan S

2831 gold badge5 silver badges17 bronze badges

Comments

monastic-panic · Accepted Answer · 2013-11-04 21:49:26Z

1

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 complicated 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

answered Nov 4, 2013 at 21:49

monastic-panic

3,9971 gold badge24 silver badges20 bronze badges

Comments

Karl · Accepted Answer · 2013-11-04 21:49:28Z

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.

Joshua Robinson · Accepted Answer · 2013-11-04 21:53:19Z

1

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)' })
});

answered Nov 4, 2013 at 21:53

Joshua Robinson

3,5731 gold badge30 silver badges35 bronze badges

2 Comments

Diego Claudiu Over a year ago

I really appreciate your answer !

Joshua Robinson Over a year ago

Welcome, as a reminder, don't forget to select an answer as a correct one (doesn't have to be this one), click the checkmark underneath the up/down vote. Take care.

Zork · Accepted Answer · 2013-11-04 21:49:30Z

0

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.com/jquery/event_hover.asp

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

answered Nov 4, 2013 at 21:49

Zork

1491 gold badge1 silver badge11 bronze badges

Comments

sagheer · Accepted Answer · 2013-11-04 22:00:13Z

0

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

answered Nov 4, 2013 at 22:00

sagheer

1,2652 gold badges13 silver badges19 bronze badges

Comments

Dan · Accepted Answer · 2013-11-05 06:50:53Z

0

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.

answered Nov 5, 2013 at 6:50

Dan

2942 silver badges8 bronze badges

Collectives™ on Stack Overflow

What is the difference between using CSS or Jquery in this case

8 Answers 8

2 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related