CODEWITHSUNDEEP
javascriptjqueryhtml
victor
victor

Reputation: 537

jquery hover not working in firefox

I try to change a image with hover, but in chrome work perfectly but in firefox not work, i just try with mouseover but the same problem not fired, this is my code

HTML

<div class="stars">
<button class="star_button" type="button" >
    <div id="star_1">
        <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
</button>
<button class="star_button" type="button" >
    <div id="star_2">
        <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
</button>
<button class="star_button" type="button" >
    <div id="star_3">
        <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
</button>
<button class="star_button" type="button" >
    <div id="star_4">
        <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
</button>
<button class="star_button" type="button" >
    <div id="star_5">
        <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
</button>
</div>

script

$( document ).ready(function() { 

 $('#star_1 img').hover(function() {
   $(this).attr('src', 'http://www.ordesa.net/images/star.png');
   $('#star_2 img').attr('src', 'http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png');
   $('#star_3 img').attr('src', 'http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png');
  });
 $('#star_2 img').hover(function() {
   $(this).attr('src', 'http://www.ordesa.net/images/star.png');
   $('#star_1 img').attr('src', 'http://www.ordesa.net/images/star.png');
   //
   $('#star_3 img').attr('src', 'http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png');
  });
 $('#star_3 img').hover(function() {
   $(this).attr('src', 'static/dashboard/icon-star-full.svg');
   $('#star_1 img').attr('src', 'static/dashboard/icon-star-full.svg');
   $('#star_2 img').attr('src', 'static/dashboard/icon-star-full.svg');
   //
  });
});

Here's my fiddle

Upvotes: 1

Views: 1091

Answers (2)

ErTR
ErTR

Reputation: 905

First of all your jQuery code is unnecessarily long, you can make it dynamic and shorter like this:

var star = 'http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png'
var fullStar = 'http://www.ordesa.net/images/star.png';
$(document).ready(function() {
  $('.star_button').hover(function() {
      var index = $(this).index(); // find out which star we are on
      var $allStars = $(this).parent().children(); // doing like this cuz maybe there are other rating stars in page
      $allStars.filter(':lt(' + parseInt(index + 1) + ')').find('img.star_img').attr('src', fullStar);
      $allStars.filter(':gt(' + parseInt(index) + ')').find('img.star_img').attr('src', star);
    })/*,
    function() {
      var $allStars = $(this).parent().children();
      $allStars.find('img.star_img').attr('src', star);
    };*/
    // if you want to reset stars after hoverleft, uncomment above
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="stars">
  <button class="star_button" type="button">
    <div id="star_1">
      <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
  </button>
  <button class="star_button" type="button">
    <div id="star_2">
      <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
  </button>
  <button class="star_button" type="button">
    <div id="star_3">
      <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
  </button>
  <button class="star_button" type="button">
    <div id="star_4">
      <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
  </button>
  <button class="star_button" type="button">
    <div id="star_5">
      <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
  </button>

</div>

It will work with any amount of stars instantly, so if you need 3 stars version, just remove the last 2 stars.

About Firefox problem: Firefox has security concerns about jsfiddle's frames it seems. I tried my and your example on Chrome and Firefox but both didn't work. I tried it as an independent HTML file and Stack Overflow's snippet system on Firefox, they were OK.

Upvotes: 2

Zachary
Zachary

Reputation: 21

I can confirm that it is not because of https. I loaded the files locally and got the same result as op. This may be due to a Firefox bug rather than a coding error.

EDIT

I believe I have solved your problem. In my case the hover function needed to be called on the button, not the div/img inside.

If you want each button to remove it's 'fullstar' status, append a new function to the end of the that button's function. See the first function for clarification.

$(document).ready(function() {
  var emptyStar = "http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png";
  var fullStar = "http://www.ordesa.net/images/star.png";
  $('#star_1').hover(function() {
    $(this).find('img').attr('src', fullStar);
    $('#star_2 img').attr('src', emptyStar);
    $('#star_3 img').attr('src', emptyStar);
  }, function() {
    $(this).find('img').attr('src', emptyStar);
  });
  $('#star_2').hover(function() {
    $('#star_1 img').attr('src', fullStar);
    $('#star_2 img').attr('src', fullStar);
    $('#star_3 img').attr('src', emptyStar);
  });
  $('#star_3').hover(function() {
    $('#star_1 img').attr('src', fullStar);
    $('#star_2 img').attr('src', fullStar);
    $('#star_3 img').attr('src', fullStar);
  });
});

<div class="stars">
  <button class="star_button" type="button" id="star_1">
    <div id="">
      <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
  </button>
  <button class="star_button" type="button" id="star_2">
    <div>
      <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
  </button>
  <button class="star_button" type="button" id="star_3">
    <div>
      <img class="star_img" src="http://reviews.acehackware.com/assets/star_empty-30fe6df72692c8a7b682c6a143b9e3f3.png">
    </div>
  </button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>

my fiddle

Upvotes: 1

Related Questions