마우스의 색상 'a'태그 변경

Question

안녕하세요 스택 오버플로 커뮤니티,

박물관 용 WW2 사이트를 만들고이 반응 형 헤더를 만들었습니다. 800px보다 작 으면 다음과 같은 일이 발생합니다.

'박물관'40-45 '를 클릭하면 하위 메뉴가 표시되지만 하위 메뉴 위로 마우스를 가져 가면 태그가 녹색 상태로 돌아갑니다.

어떻게하면이 태그를 흰색으로 만들 수 있으며 U '를 유인하는 동안 흰색으로 유지할 수 있습니까?

이

내가 여기

$(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(); 
     } 

}); 

여기

.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

시도 인 CSS를 사용하는 JQuery와 있습니다 : 방문 스타일을

header nav ul li a:visited { 
     color: white; 
     display: block; 
     text-decoration: none; 
     padding: 10px; } 

Answer 2

하위 메뉴 클릭 기능의 작동이 누락되었습니다 (preventDefault 조치). 페이지가 없으면 페이지가 화면 상단으로 다시 이동합니다. 이 시도 :

또한

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

주의이 어디 탐색에서 페이지를 방지 할 수 있으므로에만 <a href="#"> 태그이 적용됩니다.

JSFiddle

희망하는 데 도움이 :

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

그리고 여기에는 바이올린입니다!

편집

참고이 절반 밖에 문제입니다. 나머지는 지금보고 있지만 운이별로 없다 ...