语义-ui 主菜单CSS 悬停和聚焦

Question

我的导航栏样式有语义问题-ui。我喜欢在悬停时更改颜色和背景颜色并更改焦点。但是我所做的一切都不会改变悬停。我只能用 jQuery 做到这一点，但这不应该是解决这个问题的方法。

这是我用于该部分的代码：

$(document).ready(function() {
    $('.main.menu').visibility({
      type: 'fixed'
    });
  })
;

a.nav.item:hover {
  background: #1B1C1D;
  color: #17AA1C;
}

<div class="ui borderless inverted stackable main menu">
    <div class="ui text container">
      <div href="#" class="header item">
        <i class="code icon" id="myicon"></i>
        Name
      </div>
      <a href="#" class="nav item">Me</a>
      <a href="#" class="nav item">Current Projects</a>
      <a href="#" class="nav item">Blog</a>
      <a href="#" class="nav item">Contact</a>
    </div>
  </div>

Answer 1

您要覆盖的样式与 .inverted class 链接在一起。

例如，这将起作用。

.ui.inverted.menu .dropdown.item:hover,
.ui.inverted.menu .link.item:hover,
.ui.inverted.menu a.item:hover,
.ui.link.inverted.menu .item:hover {
  background: #1B1C1D;
  color: #17AA1C;
}

jsbin https://output.jsbin.com/yijowusiqe

语义-ui 主菜单CSS 悬停和聚焦

Semantic-ui main menu CSS hover and focus

html

javascript

css

jquery

semantic-ui