代码之家 › 专栏 › 技术社区 › Daan Seuntjens

悬停在li上时更改颜色

html-lists css-selectors wordpress css html

-1

Daan Seuntjens · 技术社区 · 7 年前

我正在编写一个简单的WordPress页面,当鼠标悬停在它上面时,我想更改菜单栏(右上角)的背景色。在这个网站上: https://www.happylogo.be/ . 我通常只使用“添加额外的CSS”,它只是一个CSS文件。奇怪的是,我认为我的选择代码是正确的,因为当我添加“visibility:hidden;”时,它会迅速消失,当悬停在li项上时,它会再次出现。

我现在使用的CSS代码:

#menu-primary-coach li:hover{
   /*#menu-primary-coach is the id of the lu*/
   background-color: #c7143a !important;
}

但它不起作用。当鼠标悬停在菜单项上时,如何更改背景色?

2 回复 | 直到 7 年前

jordanmannfeld 7 年前

我注意到了 <a> 在您的 <li> 实际上是用黑色覆盖悬停状态。

#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
    background-color: #000000;
}

您可以删除此样式,也可以设置 <A & GT; 到你想要的颜色。

rawnewdlz 7 年前

它是由这行CSS引起的。有一个悬停在 <a> 内 <li> . 由于页面使用的是XHTML,所以悬停样式应该位于 <A & GT; 而不是 <理工大学; . 如果您使用HTML5,它可以在 <理工大学; .

#primary-nav ul li:hover > a, #sticky_menu li:hover > a {
    background-color: #000000;
}

推荐文章

Marcin Budzy · Twenty 24 Wordpess主题的子菜单隐藏在图库下方(响应式灯箱和图库)(Wordpress)

1 年前

Cairan Van Rooyen · 为什么我的Grafana iframe不会显示在我的Wordpress网站上?

1 年前

Eiman Maghfouri · woocommerce _可购买的编辑挂钩

1 年前

OÄuz Erdem · chrome浏览器和iOS safari浏览器的页脚行为不同

1 年前

JapeNZ · 通过自定义cron作业函数向WooCommerce产品添加产品标签

1 年前

Mohammed Malleck · 在WooCommerce管理员编辑订单页面中隐藏客户IP地址

2 年前

Javad Hamashbouri · 不显示ajax警报

2 年前

Eduardo Relax · 如何获取WooCommerce产品类别url以在HTML元标记中显示?

2 年前

Stamp · 自定义字段未显示在WordPress REST API响应中

2 年前

pawan19 · WordPress的Nginx设置:面临301重定向问题

2 年前