Question

我尝试用悬停来更改图像，但是在chrome中工作完美但在firefox中无法正常工作，我只是尝试使用鼠标悬停但是同样的问题没有被触发，这是我的代码

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>

脚本

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

这是我的fiddle

Answer 1

首先，你的jQuery代码不必要地长，你可以使它变得动态和更短：

＆＃13;

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

＆＃13;

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

＆＃13;

它可以立即使用任意数量的星星，所以如果你需要3星版本，只需删除最后2颗星。

关于Firefox问题：Firefox似乎对jsfiddle的框架存在安全问题。我在Chrome和Firefox上尝试了我和你的例子，但两者都没有用。我在Firefox上尝试将其作为一个独立的HTML文件和Stack Overflow的片段系统，它们没问题。

Answer 2

我可以确认这不是因为https。我在本地加载文件并获得与op相同的结果。这可能是由于Firefox错误而不是编码错误。

修改

我相信我已经解决了你的问题。在我的情况下，需要在按钮上调用悬停功能，而不是内部的div / img。

如果您希望每个按钮删除它的'fullstar'状态，请在该按钮功能的末尾添加一个新功能。请参阅第一个功能以获得澄清。

$(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>

我的fiddle

jquery悬停不在firefox中工作

2 个答案: