jquery - 在鼠标移出时更改颜色 'a' 标签

Question

你好堆栈溢出社区，

我正在为博物馆构建这个 WW2 网站，并创建了这个响应式标题。当它小于 800px 时，会发生以下情况。

当我点击“照片”然后点击“博物馆 40-45”时，会出现子菜单，但是当我将鼠标悬停在子菜单上时，a 标签会跳回其绿色状态。

我怎样才能让这个标签变成白色，并让它在悬停 U' 时保持白色？

这是我用的jquery

$(document).ready(function(){

    $(function() {
        FastClick.attach(document.body);
    });

    var contador = 1;

    $('.menu_bar').on('click', function(event){

        event.stopPropagation();

        if (contador == 1) {
        $('nav').animate({
        left: '0'
        });
        contador = 0;
        }   

        else {
            contador = 1;

            $('nav').animate({
            left: '-100%'});

            };
        });

    $('.submenu').on('click', function(event){
        event.stopPropagation();
        $(this).children('.children').slideToggle();
    });

    if($(window).width()<800){
            $('video').get(0).pause();
            $('#headVideo').remove();
        }

});

这里是CSS

.contentWrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto; }

.home .fallBackPicture {
  max-width: 900px;
  height: 450px;
  background-color: #ccc; }
  .home .fallBackPicture video {
    width: 100% !important;
    height: auto !important; }

.menu_bar {
  display: none;
  height: 51px;
  cursor: pointer; }

header {
  width: 100%; }
  header .headerPic {
    background: url(../img/HeaderPic.jpg) center center;
    background-size: cover; }
    header .headerPic .logo {
      padding: 0 10px 35px 10px; }
      header .headerPic .logo svg {
        fill: red;
        width: 100%; }
  header nav {
    padding: 20px 10px 0px 10px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    cursor: pointer;
    background: #2B460B;
    z-index: 1000;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 0px;
    margin-top: 0px; }
    header nav ul {
      position: relative;
      background-color: #2B460B;
      background-image: -webkit-linear-gradient(#2B460B, #1E1E1E);
      background-image: linear-gradient(#2B460B, #1E1E1E);
      width: 100%;
      margin-bottom: 0px;
      margin-top: 0px;
      margin: 0 auto;
      text-align: center;
      list-style: none;
      padding-left: 0px; }
      header nav ul li {
        text-transform: uppercase;
        display: inline-block;
        position: relative;
        font-weight: 400;
        font-style: italic; }
        header nav ul li:hover {
          background: #2B460B; }
        header nav ul li a {
          color: white;
          display: block;
          text-decoration: none;
          padding: 10px; }
          header nav ul li a span {
            float: right;
            margin-right: 5px;
            margin-left: 12px; }
        header nav ul li:hover .children {
          display: block; }
          header nav ul li:hover .children ul {
            display: none;
            left: 100%;
            top: 0; }
        header nav ul li .children {
          text-align: left;
          display: none;
          background: rgba(43, 70, 11, 0.5);
          position: absolute;
          width: 250%;
          z-index: 1000;
          padding-left: 0px; }
          header nav ul li .children li {
            display: block;
            border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
            header nav ul li .children li a {
              display: block; }
              header nav ul li .children li a span {
                float: right;
                position: relative;
                top: 3px;
                margin-right: 0;
                margin-left: 10px; }
        header nav ul li .caret {
          position: relative;
          top: 3px;
          margin-left: 10px;
          margin-right: 0px; }

@media screen and (max-width: 800px) {
  .menu_bar {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    background: #2B460B; }
    .menu_bar .bt_menu {
      display: block;
      color: white;
      overflow: hidden;
      font-size: 25px;
      font-weight: bold;
      text-decoration: none;
      float: right;
      padding: 10px; }
      .menu_bar .bt_menu svg {
        fill: white;
        width: 25px;
        height: 25px; }

  header .headerPic {
    display: none; }

  header nav {
    padding: 0px 0px 0px 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    background: rgba(43, 70, 11, 0.7);
    width: 80%;
    height: calc(100% - 80px);
    position: fixed;
    right: 100%;
    margin: 0;
    top: 51px;
    overflow: scroll; }
    header nav .level-1 {
      margin-left: 2px;
      padding-left: 0px;
      margin-top: 0px;
      padding-right: 0px;
      background-color: transparent;
      background-image: none;
      background-repeat: no-repeat;
      filter: none; }
    header nav ul li {
      text-align: left;
      display: block;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
      header nav ul li a {
        display: block; }
      header nav ul li:hover .children {
        display: none; }
      header nav ul li .children {
        background: white;
        width: 100%;
        position: relative; }
        header nav ul li .children li a {
          margin-left: 5px; }
      header nav ul li #first_submenu a {
        color: #2B460B; }
        header nav ul li #first_submenu a:hover {
          color: white; }
      header nav ul li .caret {
        float: right; }
      header nav ul li:hover .children ul {
        left: 0;
        top: 0; } }
@media screen and (max-width: 480px) {
  header nav {
    width: 100%; } }

这里是 FIDDLE

Answer 1

您的子菜单点击功能缺失它是 preventDefault行动。没有它，您的页面将跳回到屏幕顶部。试试这个:

$('.submenu').on('click', function(event){
    event.stopPropagation();
    event.preventDefault();
    $(this).children('.children').slideToggle();
});

另请注意，这将阻止您的页面导航到任何地方，因此仅将其应用于 <a href="#">标签。

if($(this).attr("href") != "#"){
  event.preventDefault();
}

这是 fiddle :

JSFiddle

希望对您有所帮助!

编辑

请注意，这只是问题的一半。现在查看其余部分，但运气不佳......