Question

我是js / jquery的新手。我有这个脚本，除了Firefox之外它在各处工作。我试过.preventDefault bt也许我做错了什么。在此先感谢，非常感谢。

     <script type="text/javascript">
    $(document).ready(function() {
      $('.logo')
      .mouseover(function (){
        var hue = Math.floor(Math.random() * 16777216).toString(16);
          $('.inside').css('fill', hue);})
      .mouseout(function () {
        $('.inside').css('fill', '#F4FF29')
      });

      $('.logo')
      .mouseover(function (){
        var hue = Math.floor(Math.random() * 16777216).toString(16);
          $(".centre").css('fill', hue);})
      .mouseout(function () {
        $('.centre').css('fill', '#343434') 
      });

      $('.logo')
      .mouseover(function (){
        var hue = Math.floor(Math.random() * 16777216).toString(16);
          $('.outside').css('fill', hue);})
      .mouseout(function () {
        $('.outside').css('fill', '#FFFFFF') 
      });
    }); 
  </script>

Answer 1

我＆＃39;因为你刚接触js，所以只给出一点小费而不是答案。

首先，我们将缩小您的代码：

$('.logo')
    .mouseover(function (){
        $('.inside').css('fill', Math.floor(Math.random() * 16777216).toString(16));
        $(".centre").css('fill', Math.floor(Math.random() * 16777216).toString(16));
        $('.outside').css('fill', Math.floor(Math.random() * 16777216).toString(16));
    })
    .mouseout(function () {
        $('.inside').css('fill', '#F4FF29');
        $('.centre').css('fill', '#343434');
        $('.outside').css('fill', '#FFFFFF');
    });

我们会删除var hue，因为它只在每次通话中使用一次，但在您的情况下我们不会使用它的原因是因为您希望为每个不同的元素使用新生成的数字one.n因此，如果要在多个区域使用变量，请使用变量。

我们还将在每个操作中添加所谓的事件

要测试它停止工作的位置，请在每个事件中执行警报以查看其停止工作的位置或每次.css调用后的console.log

Answer 2

<div class="grid">
<div class="col-1">
  <ul class="nav">
    <li><a href="info.html">Information</a></li>
  </ul>
  <svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="610.8 105 699.7 692.3" enable-background="new 610.8 105 699.7 692.3" xml:space="preserve">
    <path class="inside" d="M910.3,451.1l50.4-87.3l50.4,87.3l-50.4,87.3L910.3,451.1z"/>
    <path class="centre" d="M959.8,538.1l50.4-87.3H1111l-50.4,87.3H959.8z"/>
    <path class="centre" d="M810.2,451.7l50.4-87.3h100.8L911,451.7H810.2z"/>
    <path class="outside" d="M1010.4,451.7l-49.8-86.4h-99.8L810.4,278h200.6l100.4,173.7H1010.4z"/>
    <path class="outside" d="M910.6,624.4L810.4,450.7h100.8l49.8,86.4h99.8l50.4,87.3L910.6,624.4z"/>
    <path class="inside" d="M1059.9,537.5l49.8-86.4l-99.7-172.7l50.4-87.3l150.2,260.1l-100.4,173.7L1059.9,537.5z"/>
    <path class="inside"d="M710.8,451.1l100.4-173.7l50.4,87.3l-50,86.4l99.8,172.7L861,711.2L710.8,451.1z"/>
    <path class="centre" d="M760.9,191.5h300.4l-50.4,87.3H811.5l-99.8,172.7H610.9L760.9,191.5z"/>
    <path class="centre" d="M860,710.8l50.4-87.3h199.5l99.8-172.7h100.8l-150.2,260.1L860,710.8z"/>
    <path class="outside" d="M1209.8,451.6l-149.6-259.2H760.9L710.5,105h400.2l200,346.4L1209.8,451.6z"/>
    <path class="outside" d="M810.8,797.2l-200-346.4h100.8L861.2,710h299.3l50.4,87.3L810.8,797.2z"/>
  </svg>

<!-- colorful logo hover -->
<script type="text/javascript">
   $('.logo')
  .mouseover(function (){
      $('.inside').css('fill', Math.floor(Math.random() * 16777216).toString(16));
      console.log("inside");
      $(".centre").css('fill', Math.floor(Math.random() * 16777216).toString(16));
      console.log("centre");
      $('.outside').css('fill', Math.floor(Math.random() * 16777216).toString(16));
      console.log("outside");
  })
  .mouseout(function () {
      $('.inside').css('fill', '#F4FF29');
      $('.centre').css('fill', '#343434');
      $('.outside').css('fill', '#FFFFFF');
  });
</script>
</div>

Answer 3

好的，以下在firefox中为我工作：

添加

$('.inside').css('fill', '#' + Math.floor(Math.random() * 16777216).toString(16));
$(".centre").css('fill', '#' + Math.floor(Math.random() * 16777216).toString(16));
$('.outside').css('fill', '#' + Math.floor(Math.random() * 16777216).toString(16));

鼠标悬停中的

除了Firefox之外，Jquery在各处工作

3 个答案: