Jquery下拉菜单改变悬停时的字体重量

Jquery dropdown menu changes font weight on hover

本文关键字:字体 下拉菜单 改变 悬停 Jquery      更新时间:2023-09-26

我用jQuery做了一个下拉菜单,一切都很好,除了当你在mac上的safari中查看它时,当下拉菜单显示时,它会改变字体的重量。

我非常不知道我需要改变什么来修复它。你们能帮我个忙吗,我会很感激的:

您可以看到实时版本:autooffer。Dk(鼠标悬停"mærker")并注意其他菜单改变字体粗细

jQuery:

  /* DROPDOWN & MENU ANIMATIONS */ 
var mindicator = $('.dropdown_indicator');
mindicator.hide();
var dropdown = $('.dropdown')
dropdown.hide();   
$(".hover_brands").hover(
      function () {
         dropdown.finish().slideDown(200);
         /*mindicator.css("display","block");*/
      }, 
      function () {
         dropdown.finish().slideUp(200);
        /* mindicator.css("display","none");*/
      }
);
dropdown.mouseover(
  function () {
    dropdown.stop(true, true).slideDown(0);
    /*mindicator.css("display","block");*/
  }
); 
dropdown.mouseleave(
  function () {
    dropdown.finish().slideUp(200);
    /*mindicator.css("display","none");*/
  }
);   
 mindicator.mouseover(
  function () {
    dropdown.stop(true, true).slideDown(0);
  }
); 
mindicator.mouseleave(
  function () {
    dropdown.finish().slideUp(200);
  }
); 
CSS:

#menu
{
    width: 100%;
    height: 45px;
    background: #3e6f9b;
    color: #fff;
    position: relative;
    font-size: 16px;
}
#menu ul
{
    margin:0px;
    padding: 0px;
    list-style: none;
    position: relative;
    top: 10px;
    margin-left: 60px;
}
#menu ul li
{
    display: block;
    float: left;
    margin-right: 35px;
    color: #fff;    
    text-decoration: none;
    -webkit-transition: 0.3s; /* Safari */
    transition: 0.3s;
    border-radius: 5px;
    padding:2px 5px 2px 5px;
}
#menu ul li:hover
{
    -webkit-transition: 0.3s; /* Safari */
    transition: 0.3s;
    background: #36536e;
}
#dropdown
{
    width: 100%;
    height: auto;
    min-height: 150px;
    background: #28abe3;
    position: relative;
    display: none;
    color: #fff;
    font-weight: normal;
    font-size: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
    z-index: 2;
}
HTML:

 <div id="menu" class="fix_menu_hover">     
            <ul class="nav">
                <a href="#PAGE#(HOME)" class="anchor_line">
                    <li>Vælg bil</li>
                </a>
                <a href="#PAGE#(TILBUD)" class="anchor_line">
                    <li>Tilbud</li>
                </a>
                <a href="#PAGE#(MAERKER)">
                    <li class="hover_brands">Mærker</li>
                </a>
            </ul>       
        </div>
   <div id="dropdown" class="dropdown"> 
        <ul>#LOOP_CARMAKES_ACTIVE#
            <a href="#PAGE_CARMAKE#">
                <li><div class="dropdown_dot"></div> 
               <span class="move_dropdown_txt">#CARMAKE_NAME#</span>
               </li>
            </a>
            #END#
        </ul>   
    </div>  

字体渲染问题,试试这个:

body {
  -webkit-font-smoothing: subpixel-antialiased;
}