您可以简化代码，如下所示。

当您将鼠标悬停在某个元素上时，您需要使用 this 来查找相关元素（它指的是当前悬停元素）引用

  td> div.scale {padding：5px; background-color：lightgrey; display：inline-block;} $ c> 

Im writing a short survey using html, css & js. I want to ask a question, and then let the user rate on a scale of 1-5.

Ideally I wanted the scale to be responsive, so if you hover over 1 it turns yellow. If you hover of 2, it turns both 1 and 2 yellow. If you hover over 3, it turns the first 3 boxes yellow. You get the idea.

This works pretty simply when there is only one question in the survey, but the amount of questions is likely to be unknown (and lengthy).

I was hoping I could just use the same JS function and css classes but when I hover over a 1 on a question on the page ALL the questions on the page update to be yellow. What's the best way of doing this so that each answer will only update individually and not the entire page?

Heres current HTML code:

            <table>
            <thead>
                <tr>
                    <td>Overall</td>
                    <td></td>
                    <td></td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Question 1</td>
                    <td width="300px">
                        <div class="scale-text">No Rating</div>
                        <div class="scale-1"></div>
                        <div class="scale-2"></div>
                        <div class="scale-3"></div>
                        <div class="scale-4"></div>
                        <div class="scale-5"></div>
                    </td>
                    <td>Comment</td>
                </tr>
                <tr>
                    <td>Question 2</td>
                    <td width="300px">
                        <div class="scale-text"></div>
                        <div class="scale-1"></div>
                        <div class="scale-2"></div>
                        <div class="scale-3"></div>
                        <div class="scale-4"></div>
                        <div class="scale-5"></div>
                    </td>
                    <td>Comment</td>
                </tr>                   
            </tbody>
        <table>

And JS:

<script>
$(function() {
    $('.scale-1').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-text').html("Strongly Disagree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-2').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-text').html("Disagree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-3').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-text').html("Neutral");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-4').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-4').css('background-color', 'yellow');
        $('.scale-text').html("Agree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-4').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

$(function() {
    $('.scale-5').hover(function() {
        $('.scale-1').css('background-color', 'yellow');
        $('.scale-2').css('background-color', 'yellow');
        $('.scale-3').css('background-color', 'yellow');
        $('.scale-4').css('background-color', 'yellow');
        $('.scale-5').css('background-color', 'yellow');
        $('.scale-text').html("Strongly Agree");
    }, function() {
        // on mouseout, reset the background colour
        $('.scale-1').css('background-color', '');
        $('.scale-2').css('background-color', '');
        $('.scale-3').css('background-color', '');
        $('.scale-4').css('background-color', '');
        $('.scale-5').css('background-color', '');
        $('.scale-text').html("No Rating");
    });
});

You can simplify the code as below.

When you hover over an element, you need to find the related element by using the this(which refers to the currently hovering element) reference

$(function() {
  var scaletext = {
    1: 'SA',
    2: 'A',
    3: 'N',
    4: 'Da',
    5: 'SDa'
  }
  $('.scale').hover(function() {
    var $this = $(this);
    $this.prevAll('.scale').addBack().css('background-color', 'yellow');
    $this.siblings('.scale-text').html(scaletext[$this.data('scale')]);
  }, function() {
    var $this = $(this);
    $this.prevAll('.scale').addBack().css('background-color', '');
    $this.siblings('.scale-text').html("No Rating");
  });
});

td > div.scale {
  padding: 5px;
  background-color: lightgrey;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <td>Overall</td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div data-scale="1" class="scale scale-1"></div>
        <div data-scale="2" class="scale scale-2"></div>
        <div data-scale="3" class="scale scale-3"></div>
        <div data-scale="4" class="scale scale-4"></div>
        <div data-scale="5" class="scale scale-5"></div>
      </td>
      <td>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div data-scale="1" class="scale scale-1"></div>
        <div data-scale="2" class="scale scale-2"></div>
        <div data-scale="3" class="scale scale-3"></div>
        <div data-scale="4" class="scale scale-4"></div>
        <div data-scale="5" class="scale scale-5"></div>
      </td>
      <td>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div data-scale="1" class="scale scale-1"></div>
        <div data-scale="2" class="scale scale-2"></div>
        <div data-scale="3" class="scale scale-3"></div>
        <div data-scale="4" class="scale scale-4"></div>
        <div data-scale="5" class="scale scale-5"></div>
      </td>
      <td>Comment</td>
    </tr>
    <tr>
      <td>Question 1</td>
      <td width="300px">
        <div class="scale-text">No Rating</div>
        <div data-scale="1" class="scale scale-1"></div>
        <div data-scale="2" class="scale scale-2"></div>
        <div data-scale="3" class="scale scale-3"></div>
        <div data-scale="4" class="scale scale-4"></div>
        <div data-scale="5" class="scale scale-5"></div>
      </td>
      <td>Comment</td>
    </tr>
  </tbody>
  <table>