After jquery click function hover not working

Question

I am recently started to learning jQuery and now I am stuck with this problem, everything working as expected but after the click function execute jquery hover function is not working...

$(function(){
    $("div.star").hover(function(){
        $(this).addClass("star-hover");
    });

    $("div.star").mouseout(function(){
        $(this).removeClass("star-hover");
    );
});

$(function(){
    $("div.star").click(function(){
        $(this).addClass("star-chosen");
    });
});

.star {
     height: 2em;
     width: 2em;
     border: .1em solid black;
     border-radius: 1.1em;
     display: inline-block;
     margin: 0;
     padding: .1em;
}

.star-hover {
    background-color: blue;
}

.star-chosen {
    background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
</div>

Khanh TO · Accepted Answer · 2015-09-27 10:16:43Z

1

When the element has both classes star-hover and star-chosen, it's really the problem as to which background-color to apply.

Why don't just use css :hover:

.star {
   height: 2em;
   width: 2em;
   border: .1em solid black;
   border-radius: 1.1em;
   display: inline-block;
   margin: 0;
   padding: .1em;
  }

 .star:hover  {
   background-color: blue;
  }

  .star-chosen {
   background-color: red;
  }

Your js:

$(function(){
  $("div.star").click(function(){
    $(this).addClass("star-chosen");
  });
});

http://jsfiddle.net/yyqwkaqp/

If you're looking for a jQuery approach, you have to add !important to star-hover:

.star-hover {
   background-color: blue !important;
 }

http://jsfiddle.net/d8wmhmrp/

But I would prefer the :hover solution

edited Sep 27, 2015 at 10:16

answered Sep 27, 2015 at 10:04

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

2 Comments

Joy07 Over a year ago

Thanks @Khanh TO css :hover is fine but I am looking the jQuery way :)

Khanh TO Over a year ago

@Joy07: then you have to add !important

sglazkov · Accepted Answer · 2015-09-27 12:41:14Z

0

write in CSS .star-hover after .star-chosen it help you

why you add class if hover? it can make using CSS see this solution:

$("div.star").click(function () {
  $(this).addClass("star-chosen");
});

.star {
    height: 2em;
    width: 2em;
    border: .1em solid black;
    border-radius: 1.1em;
    display: inline-block;
    margin: 0;
    padding: .1em;
}
.star-chosen {
    background-color: red;
}
.star:hover {
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
    <div class="star"></div>
</div>

edited Sep 27, 2015 at 12:41

answered Sep 27, 2015 at 11:26

sglazkov

1,0661 gold badge10 silver badges38 bronze badges

Collectives™ on Stack Overflow

After jquery click function hover not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related