[英]Trying to add a highlight on mouse-over for dropdown menu selections in Wordpress
I'd like add a mouse-over highlight in my dropdown menu selections since currently on my menus i only have a simple dropdown. 我想在下拉菜单选项中添加鼠标悬停突出显示,因为当前在菜单上我只有一个简单的下拉菜单。 I have the newest wordpress version and I'm working on oneengine theme.
我拥有最新的wordpress版本,并且我正在研究oneengine主题。 I've tried to add this from some suggestions i have found on google but it didn't work at all with the mouse-over having no reaction at all:
我试图从我在Google上找到的一些建议中添加此内容,但是将鼠标悬停完全没有任何反应时,它根本不起作用:
#navigation li:hover a {
background-color:#012A5E;
color:#F1F1F1;
}
And here is the code related to the menu itself from my style.css: 这是我的style.css中与菜单本身相关的代码:
#main-menu-top ul.sub-menu li a:hover,
#main-menu-top ul.sub-menu li a:active {
border-left-color:#ccc; border-bottom-color: transparent;
}
#main-menu-top .sub-menu {
float: left; position:
absolute; display:
none; padding: 0;
text-align: center;
border: 1px solid #BDC3C7;
border-top: none;
background: black;
z-index: 9999;
}
#main-menu-top li:hover ul.sub-menu {
display: block;
}
#main-menu-top .sub-menu li {
display: block; min-width: 100px;
}
#main-menu-top .sub-menu li a { padding: 10px 15px;
}
}
Also does this change require changing the style.css only or do i have to make a j.script code aswell? 此更改是否也仅需要更改style.css还是我也必须制作一个j.script代码? Any kind of help is greatly appreciated.
任何帮助都将不胜感激。
Does your theme have a custom css page? 您的主题有自定义的CSS页面吗? If yes then add this code there.
如果是,则在此添加此代码。
nav ul li:hover { background: red;}
If it is not available then go to Dashboard->Appearance->Editor and select 'Stylesheet (style.css)' file and add the code to the end of the file. 如果不可用,请转到“仪表板”->“外观”->“编辑器”,然后选择“样式表(style.css)”文件,并将代码添加到文件末尾。 But this has a problen.
但这有一个问题。 In the future when you update the theme there is a chance of losing all your edits.
将来当您更新主题时,可能会丢失所有编辑。 So it is safe to create a child theme in order to keep all the changes permanently.
因此,创建子主题以永久保留所有更改是安全的。 See this link to know more about child themes.
请参阅此链接以了解有关儿童主题的更多信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.