Jquery下拉菜单改变悬停时的字体重量
Jquery dropdown menu changes font weight on hover
我用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;
}
相关文章:
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- angular的下拉菜单
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 创建下拉菜单
- 下拉菜单在菜单按钮的边缘闪闪发光
- I'我设计了一个下拉菜单,onclick会出现,而on blur会消失
- 硒IDE下拉菜单
- 我的下拉菜单中的链接不起作用
- Bootstrap Dropdown selection是在*all*下拉菜单上设置选择
- 如何将JSON转换为HTML下拉菜单
- 悬停下拉菜单即使在鼠标移出后也保持活动状态
- 基于下拉菜单创建开关
- 动态填充两个下拉菜单
- 如何将CSS(特别是填充/边距)应用于select下拉菜单的选项或optgroup
- 基于其他下拉菜单选择隐藏/显示下拉菜单
- JavaScript下拉菜单-部件在Mac上消失
- 为什么引导程序下拉菜单只有在包含bootstrap-responsive.css时才起作用
- 下拉菜单选择了与其他字体不同的选项
- Jquery下拉菜单改变悬停时的字体重量
- 增加下拉菜单,以便在现场更改字体