Question

我正在使用JQuery在我的网站上进行CSS更改，并且某些代码有问题。我是使用jquery的新手，通常可以在进行更改时弄清楚它，但这使我感到困惑。

我在下面包括了我的MTML，CS和Jquery的片段。我试图做的是在悬停时在链接上加下划线，同时当有人向下滚动页面时，更改背景和链接颜色。一切正常，除了我无法弄清楚当使用的滚动向下时，在我的jquery代码中放入什么使下划线出现。

任何帮助将不胜感激。我知道答案可能很简单，但我不确定要更改jquery是什么。

我故意遗漏了无法使用的代码，但是我猜测我需要在jquery中使用if语句添加代码。这是我一直尝试添加语句的地方，但是我插入的任何内容都没有起作用。

我几乎忘了补充一点，代码在悬停链接上加了下划线（与链接颜色相同），并且我想在页面向下滚动时执行相同的操作（如果链接通常是蓝色和白色背景，则悬停下划线也是蓝色，向下滚动后，背景颜色变为蓝色，链接为金色。我希望下划线也为金色。

谢谢

$(window).scroll(function() {
  // 100 = The point you would like to fade the nav in.

  if ($(window).scrollTop() > 50) {
    $('.bg').addClass('show');
    $('nav li a').css('color', '#FFCF01');
  } else {
    $('.bg').removeClass('show');
    $('nav li a').css('color', '#00529C');

  };
});

$('.scroll').on('click', function(e) {
  e.preventDefault()

  $('html, body').animate({
    scrollTop: $(this.hash).offset().top
  }, 1000);
});

nav {
  margin: 0 auto;
  max-width: 1024px;
}

.hdrmenu ul {
  margin-right: 1em;
  padding-top: 1.25em;
}

.hdrmenu li {
  float: left;
  list-style: none;
}

.hdrmenu li a {
  text-align: center;
  text-decoration: none;
  padding: 0em 1em;
  overflow: hidden;
  color: #00529C;
}

.show {
  background-color: #00529C;
  color: #FFCF01;
  width: 100%;
  height: 6em;
  opacity: 0.8;
}

.slide-left-right {
  text-decoration: none;
  display: inline-block;
  color: #FFCF01;
  /* yellow gold */
  float: left;
}


/* add a empty string after the elment with class .slide-left-right */

.slide-left-right:after {
  content: '';
  display: block;
  height: 2px;
  width: 0;
  background: transparent;
  transition: width .7s ease, background-color .7s ease;
  /* .5 seonds for changes to the width and background-color */
  -webkit-transition: width .7s ease, background-color .7s ease;
  /* Chrome and Safari */
  -moz-transition: width .7s ease, background-color .7s ease;
  /* FireFox */
}


/* Change the width and background on hover, aka sliding out */

.slide-left-right:hover:after {
  width: 100%;
  background: #00529C;
  /* lc blue */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header class="bg transition">
  <nav class="hdrmenu">
    <a href="index.html"><img src="_images/logo.gif" class="logo"></a>
    <ul style="float: right;">
      <li><a href="one.html" class="slide-left-right">Diabetes</a></li>
      <li><a href="two.html" class="slide-left-right">Vision</a></li>
      <li><a href="three.html" class="slide-left-right">Hunger</a></li>
      <li><a href="four.html" class="slide-left-right">Environmental Issues</a></li>
      <li><a href="five.html" class="slide-left-right">Childhood Cancer</a></li>
      <li><a href="six.html" class="slide-left-right boldLi">We Serve</a></li>
    </ul>
  </nav>
</header>

Answer 1

尝试一下。

-F 
'request={"name":"test", "reference":"870e0320-021e-4c67-9169-d4b2c7e5b9c9"}'

我需要对jquery进行什么更改才能执行过渡效果

1 个答案: