堆栈内存溢出
  简体   繁体   English

HTML 导航栏在 hover 上不改变背景颜色

[英]HTML navbar not changing background color upon hover

 原文  2022-09-11 04:11:53  8   2    javascript/ html/ jquery/ css

问题描述

I'm attempting to re-create this navbar on my local machine.我正在尝试在本地计算机上重新创建此导航栏。 I have the relevant html/css/js loaded correctly, including jquery, the only issue is when I hover over each element, the element background is not changing to the color blue.我正确加载了相关的 html/css/js，包括 jquery，唯一的问题是当我在每个元素上 hover 时，元素背景没有变为蓝色。

I've tried re-arranging the order of my js/css in the head section, but there's no change.我尝试在 head 部分重新安排我的 js/css 的顺序，但没有任何变化。

For a reproducible example, here is the html:对于可重现的示例，这里是 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>

Any help is appreciated.任何帮助表示赞赏。 Thank you.谢谢你。

2 个解决方案

解决方案1
 2  2022-09-11 04:44:03

You need to convert the SCSS syntax to plain CSS syntax as changed below您需要将 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>

解决方案2
 0  2022-09-11 04:43:47

The reason it cannot work because you are not using SCSS, you are using css and it does not support nested syntax like:它无法工作的原因是您没有使用 SCSS，您使用的是 css 并且它不支持嵌套语法，例如：

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

change the styles of hover to:将 hover 的 styles 更改为：

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 导航栏使用jQuery更改背景颜色 - navbar changing background color with jQuery 使用 javascript 更改 hover 背景颜色 - Changing hover background color with javascript 用 cursor 在 hover 上更改背景颜色 - Change background color upon hover over with cursor 更改折叠的导航栏列表背景颜色 - Changing Collapsed navbar list background color 为什么滚动时导航栏的背景颜色不会改变？ - Why is background color not changing for navbar on scrolling? 在滚动时更改导航栏背景颜色不起作用 - Changing navbar background color on scroll not working Bootstrap 5 导航栏在滚动时不会改变背景颜色？ - Bootstrap 5 navbar not changing background color on scroll? 在悬停时使用JQuery更改背景颜色 - Changing Background Color Using JQuery on Hover 悬停时更改表格行的背景颜色 - Changing background color of table row on hover jQuery在悬停时更改背景颜色，并不断闪烁 - Jquery changing background color on hover, keeps flashing
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM