Почему не работает hover при добавлении его с помощью JS?

Question

[Hyubert]

Пока не скролить то он работает нормально, но после скрола перестает , даже если вернуться в начальное положение.

.nav a{
    text-decoration: none;
    display: block;
    padding: 10px 30px;
    color: #fff;
    text-transform: uppercase;

}
.nav a:hover{
    color: #af3030;
}

$(document).ready(function() {
  showContentOnScroll();
});

function showContentOnScroll() {
  $(window).scroll(function() {
    var bo = $("body").scrollTop();
    if (bo > 80) {
      $(".header").css({
          'position':'fixed',
          'top':'0',
          'background':'#fff',
          'height':'80px'
      });
      $(".nav").css({
          'margin-top':'20px'
      });
      $(".nav a").css({
          'color':'#000'
      });
        $(".nav a:hover").css({
          'color':'#af3030'
      });
       $(".b1").css({
          'display':'none'
      });
        $(".b2").css({
          'display':'none'
      });
      $(".left img").css({
          'width':'40px'
      });
    } else {
      $(".header").css({
          'position':'relative',
          'background':'#3f415c',
          'height':'100px'
      });
      $(".nav").css({
          'margin-top':'30px'
      });
      $(".nav a").css({
          'color':'#fff'
      });
          $(".b1").css({
          'display':'block'
      });
        $(".b2").css({
          'display':'block'
      });
      $(".left img").css({
          'width':'60px'
      });
    };
  });
}

Answer 1

[Сергей Мельников]

менять css через js - это зло
в вашем случае надо в зависимости от условия добавлять или удалять класс у .header, а стили будут применяться уже в зависимости от класса

<style>
.nav a{
  text-decoration: none;
  display: block;
  padding: 10px 30px;
  color: #fff;
  text-transform: uppercase;
}
.nav a:hover{
  color: #af3030;
}

.header {
  position: relative;
  background: #3f415c;
  height: 100px;
}
.nav {
  margin-top: 30px;
}
.nav a {
  color: #fff;
}
.left img {
  width: 60px;
}

.header.fixed {
  position: fixed;
  top: 0;
  background: #fff;
  height: 80px;
}
.fixed .nav {
  margin-top: 20px;
}
.fixed .nav a {
  color: #000;
}
.fixed .nav a:hover {
  color: #af3030;
}
.fixed .b1,
.fixed .b2 {
  display: none;
}
.fixed .left img {
  width: 40px;
}
</style>

<script>
$(function() {
  $(window).scroll(windowScrollHandler)
})
function windowScrollHandler() {
  if ($("body").scrollTop() > 80) {
    $(".header").addClass("fixed")
  } else {
    $(".header").removeClass("fixed")
  }
}
</script>

Comments

[Hyubert]

не понимаю почему это работает, можете разъяснить, или кинуть ссылку?

Answer 2

[Kostya Gorozhanov]

$(".nav a").hover()
Не тупи так больше)

Comments

[Hyubert]

я не давно только начал учить JS

как вставить ето в такую конструкцию? нужно прописывать function ?

$(".nav a").hover().css({
'color':'#af3030'
});

Answer 3

[profesor08]

А не лучше ли все эти стили написать в CSS файле, через JS уже менять класс элемента?

Comments

[Hyubert]

я не давно только начал учить JS , и не знаю как лучше