javascript - HTML 导航栏在悬停时不会更改背景颜色

标签 javascript html jquery css

我正在尝试重新创建此 navbar在我的本地机器上。我正确加载了相关的 html/css/js，包括 jquery，唯一的问题是当我将鼠标悬停在每个元素上时，元素背景没有更改为蓝色。

我尝试重新排列 head 部分中 js/css 的顺序，但没有任何变化。

对于可重现的示例，以下是 html:

class StickyNavigation {

  constructor() {
    this.currentId = null;
    this.currentTab = null;
    this.tabContainerHeight = 70;
    let self = this;
    $('.et-hero-tab').click(function() {
      self.onTabClick(event, $(this));
    });
    $(window).scroll(() => {
      this.onScroll();
    });
    $(window).resize(() => {
      this.onResize();
    });
  }

  onTabClick(event, element) {
    event.preventDefault();
    let scrollTop = $(element.attr('href')).offset().top - this.tabContainerHeight + 1;
    $('html, body').animate({
      scrollTop: scrollTop
    }, 600);
  }

  onScroll() {
    this.checkTabContainerPosition();
    this.findCurrentTabSelector();
  }

  onResize() {
    if (this.currentId) {
      this.setSliderCss();
    }
  }

  checkTabContainerPosition() {
    let offset = $('.et-hero-tabs').offset().top + $('.et-hero-tabs').height() - this.tabContainerHeight;
    if ($(window).scrollTop() > offset) {
      $('.et-hero-tabs-container').addClass('et-hero-tabs-container--top');
    } else {
      $('.et-hero-tabs-container').removeClass('et-hero-tabs-container--top');
    }
  }

  findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $('.et-hero-tab').each(function() {
      let id = $(this).attr('href');
      let offsetTop = $(id).offset().top - self.tabContainerHeight;
      let offsetBottom = $(id).offset().top + $(id).height() - self.tabContainerHeight;
      if ($(window).scrollTop() > offsetTop && $(window).scrollTop() < offsetBottom) {
        newCurrentId = id;
        newCurrentTab = $(this);
      }
    });
    if (this.currentId != newCurrentId || this.currentId === null) {
      this.currentId = newCurrentId;
      this.currentTab = newCurrentTab;
      this.setSliderCss();
    }
  }

  setSliderCss() {
    let width = 0;
    let left = 0;
    if (this.currentTab) {
      width = this.currentTab.css('width');
      left = this.currentTab.offset().left;
    }
    $('.et-hero-tab-slider').css('width', width);
    $('.et-hero-tab-slider').css('left', left);
  }

}

new StickyNavigation();
body {
  font-family: "Century Gothic", 'Lato', sans-serif;
}

a {
  text-decoration: none;
}

.et-hero-tabs,
.et-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  background: #eee;
  text-align: center;
  padding: 0 2em;
  h1 {
    font-size: 2rem;
    margin: 0;
    letter-spacing: 1rem;
  }
  h3 {
    font-size: 1rem;
    letter-spacing: 0.3rem;
    opacity: 0.6;
  }
}

.et-hero-tabs-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: #fff;
  z-index: 10;
  &--top {
    position: fixed;
    top: 0;
  }
}

.et-hero-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: #FF0000;
  letter-spacing: 0.1rem;
  transition: all 0.5s ease;
  font-size: 0.8rem;
  &:hover {
    color: #FF0000;
    background: rgba(102, 177, 241, 0.8);
    transition: all 0.5s ease;
  }
}

.et-hero-tab-slider {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 6px;
  background: #66B1F1;
  transition: left 0.3s ease;
}

@media (min-width: 800px) {
  .et-hero-tabs,
  .et-slide {
    h1 {
      font-size: 3rem;
    }
    h3 {
      font-size: 1rem;
    }
  }
  .et-hero-tab {
    font-size: 1rem;
  }
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

<!-- Hero -->
<section class="et-hero-tabs">
  <h1>STICKY SLIDER NAV</h1>
  <h3>Sliding content with sticky tab nav</h3>
  <div class="et-hero-tabs-container">
    <a class="et-hero-tab" href="#tab-es6">ES6</a>
    <a class="et-hero-tab" href="#tab-flexbox">Flexbox</a>
    <a class="et-hero-tab" href="#tab-react">React</a>
    <a class="et-hero-tab" href="#tab-angular">Angular</a>
    <a class="et-hero-tab" href="#tab-other">Other</a>
    <span class="et-hero-tab-slider"></span>
  </div>
</section>

<!-- Main -->
<main class="et-main">
  <section class="et-slide" id="tab-es6">
    <h1>ES6</h1>
    <h3>something about es6</h3>
  </section>
  <section class="et-slide" id="tab-flexbox">
    <h1>Flexbox</h1>
    <h3>something about flexbox</h3>
  </section>
  <section class="et-slide" id="tab-react">
    <h1>React</h1>
    <h3>something about react</h3>
  </section>
  <section class="et-slide" id="tab-angular">
    <h1>Angular</h1>
    <h3>something about angular</h3>
  </section>
  <section class="et-slide" id="tab-other">
    <h1>Other</h1>
    <h3>something about other</h3>
  </section>
</main>

感谢任何帮助。谢谢。

最佳答案

您需要将 SCSS 语法转换为纯 CSS 语法，如下所示

class StickyNavigation {

  constructor() {
    this.currentId = null;
    this.currentTab = null;
    this.tabContainerHeight = 70;
    let self = this;
    $('.et-hero-tab').click(function() {
      self.onTabClick(event, $(this));
    });
    $(window).scroll(() => {
      this.onScroll();
    });
    $(window).resize(() => {
      this.onResize();
    });
  }

  onTabClick(event, element) {
    event.preventDefault();
    let scrollTop = $(element.attr('href')).offset().top - this.tabContainerHeight + 1;
    $('html, body').animate({
      scrollTop: scrollTop
    }, 600);
  }

  onScroll() {
    this.checkTabContainerPosition();
    this.findCurrentTabSelector();
  }

  onResize() {
    if (this.currentId) {
      this.setSliderCss();
    }
  }

  checkTabContainerPosition() {
    let offset = $('.et-hero-tabs').offset().top + $('.et-hero-tabs').height() - this.tabContainerHeight;
    if ($(window).scrollTop() > offset) {
      $('.et-hero-tabs-container').addClass('et-hero-tabs-container--top');
    } else {
      $('.et-hero-tabs-container').removeClass('et-hero-tabs-container--top');
    }
  }

  findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $('.et-hero-tab').each(function() {
      let id = $(this).attr('href');
      let offsetTop = $(id).offset().top - self.tabContainerHeight;
      let offsetBottom = $(id).offset().top + $(id).height() - self.tabContainerHeight;
      if ($(window).scrollTop() > offsetTop && $(window).scrollTop() < offsetBottom) {
        newCurrentId = id;
        newCurrentTab = $(this);
      }
    });
    if (this.currentId != newCurrentId || this.currentId === null) {
      this.currentId = newCurrentId;
      this.currentTab = newCurrentTab;
      this.setSliderCss();
    }
  }

  setSliderCss() {
    let width = 0;
    let left = 0;
    if (this.currentTab) {
      width = this.currentTab.css('width');
      left = this.currentTab.offset().left;
    }
    $('.et-hero-tab-slider').css('width', width);
    $('.et-hero-tab-slider').css('left', left);
  }

}

new StickyNavigation();
body {
  font-family: "Century Gothic", 'Lato', sans-serif;
}

a {
  text-decoration: none;
}

.et-hero-tabs,
.et-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  background: #eee;
  text-align: center;
  padding: 0 2em;
}

.et-hero-tabs h1,
.et-slide h1 {
  font-size: 2rem;
  margin: 0;
  letter-spacing: 1rem;
}

.et-hero-tabs h3,
.et-slide h3 {
  font-size: 1rem;
  letter-spacing: 0.3rem;
  opacity: 0.6;
}

.et-hero-tabs-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  background: #fff;
  z-index: 10;
}

.et-hero-tabs-container--top {
  position: fixed;
  top: 0;
}

.et-hero-tab {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  color: #FF0000;
  letter-spacing: 0.1rem;
  transition: all 0.5s ease;
  font-size: 0.8rem;
}

.et-hero-tab:hover {
  color: #FF0000;
  background: rgba(102, 177, 241, 0.8);
  transition: all 0.5s ease;
}

.et-hero-tab-slider {
  position: absolute;
  bottom: 0;
  width: 0;
  height: 6px;
  background: #66B1F1;
  transition: left 0.3s ease;
}

@media (min-width: 800px) {
  .et-hero-tabs h1,
  .et-slide h1 {
    font-size: 3rem;
  }
  .et-hero-tabs h3,
  .et-slide h3 {
    font-size: 1rem;
  }
  .et-hero-tab {
    font-size: 1rem;
  }
}
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

<!-- Hero -->
<section class="et-hero-tabs">
  <h1>STICKY SLIDER NAV</h1>
  <h3>Sliding content with sticky tab nav</h3>
  <div class="et-hero-tabs-container">
    <a class="et-hero-tab" href="#tab-es6">ES6</a>
    <a class="et-hero-tab" href="#tab-flexbox">Flexbox</a>
    <a class="et-hero-tab" href="#tab-react">React</a>
    <a class="et-hero-tab" href="#tab-angular">Angular</a>
    <a class="et-hero-tab" href="#tab-other">Other</a>
    <span class="et-hero-tab-slider"></span>
  </div>
</section>

<!-- Main -->
<main class="et-main">
  <section class="et-slide" id="tab-es6">
    <h1>ES6</h1>
    <h3>something about es6</h3>
  </section>
  <section class="et-slide" id="tab-flexbox">
    <h1>Flexbox</h1>
    <h3>something about flexbox</h3>
  </section>
  <section class="et-slide" id="tab-react">
    <h1>React</h1>
    <h3>something about react</h3>
  </section>
  <section class="et-slide" id="tab-angular">
    <h1>Angular</h1>
    <h3>something about angular</h3>
  </section>
  <section class="et-slide" id="tab-other">
    <h1>Other</h1>
    <h3>something about other</h3>
  </section>
</main>

关于javascript - HTML 导航栏在悬停时不会更改背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73676756/

上一篇：python - 过滤 Sqlalchemy 关系条件

下一篇：php - 函数参数太少，使用 Mail 时传入 0，而预期正好 1

相关文章：

JavaScript:小于 + 大于

javascript - 在 Socket.io 基本聊天应用程序中添加聊天机器人

html - 如何使用内容元素将自定义 html 标签添加到 swal

javascript - 防止 div 元素在切换其他元素时移动？

javascript - 根据最宽的选项选择 2 宽度？

javascript - JQuery Masonry 是怎么来的，当我在浏览器上单击 "back"时，它会将用户射回顶部？

javascript - JavaScript ES6 (<<) 中的按位左移是否在 63 位以上循环？

javascript - ng-repeat limitTo 语法中如何操作

jquery - 使用 JQuery 淡入/淡出文本框中的文本并修复 CSS 中的按钮

javascript - 在 JavaScript/jQuery 中向 API 发出 POST 请求

©2024 IT工具网  联系我们