javascript - I can't get the OR operator to work properly

Question

For some reason I do not understand, the OR operator does not work properly.

In below example I am trying to create a hover effect with jquery, which is only applied if the id of the hovered element is not equal to "f1" or "c1"

But as can be seen in the provided example it does not work. Any ideas?

$(document).on("mouseenter", ".123456", function() {
  if (this.id != 'f1' || this.id != 'c1') {
    $(this).css("background-color", "green")
    $(this).find('span').css("color", "red")
  }
});
$(document).on("mouseleave", ".123456", function() {
  if ((this.id != 'f1') || (this.id != 'c1')) {
    $(this).css("background-color", "white")
    $(this).find('span').css("color", "black")
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="a1" class="123456">
  <span>a1</span>
</div>

<div id="f1" class="123456">
  <span>f1</span>
</div>

Answer 1

Change the or's to and's.

$(document).on("mouseenter", ".123456", function() {
  if (this.id != 'f1' && this.id != 'c1') {
    $(this).css("background-color", "green")
    $(this).find('span').css("color", "red")
  }
});
$(document).on("mouseleave", ".123456", function() {
  if ((this.id != 'f1') && (this.id != 'c1')) {
    $(this).css("background-color", "white")
    $(this).find('span').css("color", "black")
  }
});

This way, the hover effect will only be applied to elements whose id is not c1 AND to elements whose id is not f1.