jquery hover with if/else statement

Question

I have a hover state that I want to use, but only if the opacity is not .65, this is what I have but it's not quite working, not sure exactly how to change it. Thanks in advance for any help.

$('.info_btn').hover(
  var jthis = this;
  if($('.info_btn').css('opacity') == 0.65) { }
  else {
    function() {
        $(jthis).css({
              "opacity": "0.7",
              "-moz-opacity": "0.7",
              "filter": "alpha(opacity = 70)"
        });
    }, function() {
        $(jthis).css({
              "opacity": "0.2",
              "-moz-opacity": "0.2",
              "filter": "alpha(opacity = 20)"
        });
    }
  }
);

Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. You've invalid syntax. jQuery hover expects 1 or 2 functions as arguments. — Ejaz
– Ejaz, Commented Apr 1, 2013 at 14:06

Ejaz · Accepted Answer · 2013-04-01 14:22:53Z

2

This one only binds the events to the only .info_btn elements that have opaticy == 0.65. Useful in case you've lots of .info_btn elements

        $('.info_btn').filter(function () {
           return parseFloat($(this).css('opacity')) == 0.65
        }).on({
              mouseover: function () {
                 $(this).css({
                    "opacity": "0.7",
                    "-moz-opacity": "0.7",
                    "filter": "alpha(opacity = 70)"
                 });
              },
              mouseout: function () {
                 $(this).css({
                    "opacity": "0.2",
                    "-moz-opacity": "0.2",
                    "filter": "alpha(opacity = 20)"
                 });
              }
           });

It let's you maintain the condition opacity == 0.65 in one place, doesn't attach events to extra .info_btn elements.

edited Apr 1, 2013 at 14:22

answered Apr 1, 2013 at 14:15

Ejaz

8,8723 gold badges38 silver badges52 bronze badges

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

Comments

Andrei Cristian Prodan · Accepted Answer · 2013-04-01 14:03:55Z

1

$('.info_btn').mouseover(function() {
     if($(this).css('opacity') == 0.65) { }
});

This is all you need for what you described in your question.

mouseover and hover are kinda the same thing
http://api.jquery.com/mouseover/
http://api.jquery.com/hover/

answered Apr 1, 2013 at 14:03

Andrei Cristian Prodan

1,1224 gold badges17 silver badges34 bronze badges

Collectives™ on Stack Overflow

jquery hover with if/else statement

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related