代码之家  ›  专栏  ›  技术社区  ›  Ylama

在样式后悬停在ul子元素效果ul上

  •  2
  • Ylama  · 技术社区  · 6 年前

    我能用 css

    想成为目标 ul:after li ul .

    ul.secondary:after {
        border-color: #f3f4f1 transparent;
        border-width: 0 8px 8px;
        right: 11px;
        top: 0;
        left: 0;
        border-style: solid;
        content: "";
        position: absolute;
    } 
    
    /*this is not working*/
    ul.secondary li:first-child a:hover + ul.primary ul.secondary::after {
          border-color: #9caa9c transparent; 
    }
    
    
    ul.secondary li:first-child a:hover {
          color: red;
    }
    <ul class="primary">
      <li>
          <ul class="secondary">
              <li><a href="">hover me makes ":after" change border color</a></li>
              <li><a href="">text</a></li>
              <li><a href="">text</a></li>
              <li><a href="">text</a></li>
              <li><a href="">text</a></li>
          </ul>
      </li>
    </ul>
    1 回复  |  直到 6 年前
        1
  •  2
  •   Ramesh Diego Lins de Freitas    6 年前

    不能为编写jquery pseudo elements content:"hi" 而不是 content:"" :after 你有的。

    $('.secondary>li:first-child>a').mouseover(function(){
      $('.secondary').addClass('hover');
      //You can write whatever you want in here
    });
    $('.secondary>li:first-child>a').mouseout(function(){
      $('.secondary').removeClass('hover');
      //You can write whatever you want in here
    });
    ul.secondary:after {
      content:"";
      border-color: #f3f4f1 transparent;
      border-width: 0 8px 8px;
      right: 11px;
      top: 0;
      left: 0;
      border-style: solid;
      position: absolute;
    }
    ul.secondary li:first-child a:hover {
      color: red;
    }
    ul.secondary.hover:after {
        border-color: red transparent;
    }
    ul.secondary.hover>li{
       color:black;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <ul class="primary">
      <li>
        <ul class="secondary">
          <li><a href="">hover me makes ":after" change border color</a> </li>
          <li><a href="">text</a></li>
          <li><a href="">text</a></li>
          <li><a href="">text</a></li>
          <li><a href="">text</a></li>
        </ul>
      </li>
    </ul>