Menu icon Foundation
Disable jquery/javascript event? Or something else?

Hi I made a button group nav bar from a foundation template. When my mouse moves away from the button area it turns blue. It only happens when the mouse leaves, not when hovering or anything else. Is the mouse leaving triggering a jquery or javascript event? If so where is the event and how do I disable it or change the color?? I would like it to remain WHITE!

The pic below shows what happens once the mouse leaves the area. There are also 2 diff shades of blue. I have tried changing the button group properties in the scss but doesn't seem to help.

I'm new to all this foundaiton stuff.

Sdsd

            

          <nav class="row">
    <div class="large-12 columns scale-with-grid">  
      <ul class="button-group">
        <li><a class="button" href="#">Choose a charity</a></li>
        <li><a class="button" href="#">My account</a></li>
        <li><a class="button" href="#">Sign Up</a></li>
        <li><a class="button" href="#">About</a></li>
      </ul>
    </div>
  </nav
  
  
  
  
  
  css
  
  
  nav .button {
      border: 0;
      background: #fff;
      font-size: 17px;
      color: #000000;  
    }
    
    nav .button:hover {
      background: #fff;
    }

Nav barjquerybutton-group

Hi I made a button group nav bar from a foundation template. When my mouse moves away from the button area it turns blue. It only happens when the mouse leaves, not when hovering or anything else. Is the mouse leaving triggering a jquery or javascript event? If so where is the event and how do I disable it or change the color?? I would like it to remain WHITE!

The pic below shows what happens once the mouse leaves the area. There are also 2 diff shades of blue. I have tried changing the button group properties in the scss but doesn't seem to help.

I'm new to all this foundaiton stuff.

Sdsd

            

          <nav class="row">
    <div class="large-12 columns scale-with-grid">  
      <ul class="button-group">
        <li><a class="button" href="#">Choose a charity</a></li>
        <li><a class="button" href="#">My account</a></li>
        <li><a class="button" href="#">Sign Up</a></li>
        <li><a class="button" href="#">About</a></li>
      </ul>
    </div>
  </nav
  
  
  
  
  
  css
  
  
  nav .button {
      border: 0;
      background: #fff;
      font-size: 17px;
      color: #000000;  
    }
    
    nav .button:hover {
      background: #fff;
    }
annearchy about 5 years ago

I just joined the forum so I don't know how to edit my original post. I'm replying to my own question I guess..

Anyways, I went to _buttons.css and found this on line 33

// We use these to control various hover effects.
$button-function-factor: -20% !default;

and changed it to

// We use these to control various hover effects.
$button-function-factor: 100% !default;

and the blue went away. I have no idea how this is working or if this is the right way to solve the problem. I also haven't added a drop down menu to one of my nav bar items so this may cause more complications.