Semantic-ui ana menüsü CSS vurgusu ve odaklama

Question

Semantik-ui ile navbarın stiliyle ilgili bir sorunum var. Vurguluyken rengi ve arka plan rengini değiştirmeyi ve odağı değiştirmeyi seviyorum. Ama yaptığım her şey vurgulu değiştirmez. Sadece jQuery ile yapabiliyordum, ama bu sorunun çözümü olmamalı.

$(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

geçersiz kılmak istediğiniz tarzı .inverted sınıfı ile zincirlenmiş:

Bu

O rol için kullanmak koddur.

Bu, örneğin çalışacaktır.

.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; 
} 

Bu seferki, thx beni öldürüyordu https://output.jsbin.com/yijowusiqe