Question

我正在尝试在MENU2,3和子菜单上创建一个悬停，就像在菜单1和2上悬停一样。

我只能悬停在标题类上。当下面的标题类没有.active类这可能时，我试图将鼠标悬停在.ui .accordion .item上吗？

 $(".ui.accordion").accordion();

/*
.ui.accordion.item:hover {
    background: rgba(255,255,255,.1);
    color: #ffffff;
}
*/

.ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover {
    background-color: transparent;
}

.ui.inverted.menu .active.item {
   background-color: transparent;
}
  
.ui.accordion.item > .title:NOT(.active):hover {
    background: rgba(255,255,255,.1);
    color: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.js"></script>
  <div class="pusher">
    <div class="container">
      <div class="ui left fixed vertical inverted menu">
         
        <div class="item">
          <form method="POST" action="#">
            <div class="ui fluid inverted transparent icon input">
              <input type="text" name="search">
              <i class="search icon"></i>
            </div>
            <input type="submit" value="Submit" style="display:none;">
          </form>      
        </div>        

        <a class="item" href="#">MENU 1</a>
        <a class="item" href="#">MENU 2</a>   
        <div class="ui accordion item inverted">
          <div class="title item" style="padding: 0px;">
            <i class="dropdown icon"></i> MENU 3
          </div>
          <div class="content">
            <a class="item" href="#">SUBMENU 1</a>
            <a class="item" href="#">SUBMENU 2</a>
          </div>    
        </div>
        <div class="ui accordion item inverted">
          <div class="title item" style="padding: 0px;">
            <i class="dropdown icon"></i> MENU 4
          </div>
          <div class="content">
            <a class="item" href="#">SUBMENU 1</a>
            <a class="item" href="#">SUBMENU 2</a>
          </div>    
        </div>        
    </div>  
  </div>

http://jsfiddle.net/4mpb7cfx/303/

Answer 1

尝试在.active set

时覆盖悬停到默认样式

<asp:Button ID="ButtonClearAll" CausesValidation="false" ... />

Answer 2

我解决了自己的问题 http://jsfiddle.net/4mpb7cfx/306/

.ui.accordion.item {
  padding:0px;
}

.ui.accordion.item > .title {
  padding: .78571em .95em;
}

.ui.menu .active.item:hover, .ui.vertical.menu .active.item:hover {
  background-color: transparent;
}

.ui.inverted.menu .active.item {
   background-color: transparent;
}

.ui.accordion.item > .title:NOT(.active):hover {
  background: rgba(255,255,255,.1);
  color: #ffffff;
}

.ui.accordion.item > .content > .item {
  padding-left: 1.2em;
}

仅在未激活时悬停

2 个答案: