如果我将subnav-content悬停在箭头上,怎么能保持向上箭头?

i made a jsfiddle, https://jsfiddle.net/g7u0zkyc/1/.

I want the arrow up when i hover the subnav-content (see code class).

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <div class="navbarSecond">
                    <div class='container'>
                  <div class="subnav">
                    <button class="subnavbtn">NEW RELEASES<i class='subnav-arrow down'></i></button>
                    <div class="subnav-content">
                            <div class='container'>
                                <div class='row'>
                                <div class='col-md-2 margin-right-subnav-links'>
                      <a href="#">test1</a>
                      <a href="#">test2</a>
                    </div>
                        </div>
                        </div>
                        </div>
                  </div>
                </div>
            </div>


  .navbarSecond {
    overflow: hidden;
    background-color: darkgrey;
  }

  .navbarSecond a {
    float: left;
    font-size: 14px;
    color: white;
    text-align: center;
    padding: 10px 12px;
    text-decoration: none;
  }

  .subnav {
    float: left;
    overflow: hidden;
  }

  .subnav .subnavbtn {
    font-size: 14px;
    border: none;
    outline: none;
    color: white;
    padding: 10px 12px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
  }

  .navbarSecond a:hover, .subnav:hover .subnavbtn {
    background-color: black;
  }

  .subnav-content {
    display: none;
    position: absolute;
    left: 0;
    background-color: grey;
    width: 100%;
    z-index: 1;
  }

  .subnav-content a {
    float: none;
    width:200px;
    color: white;
    text-decoration: none;
    padding:5px;
    display: block;
    text-align: center;
  }

  .subnav-content a:hover {
    background-color: #eee;
    color: black;
  }

    .subnav-content .normal-subnav-links a {
        text-align: left;
    }

    .subnav-content .normal-subnav-links a:hover {
      background:transparent;
    }

  .subnav:hover .subnav-content {
    display: block;
  }

  .normal-subnav-links a:first-child {
  font-weight: 700;
}


.margin-right-subnav-links {
  margin-right:35px;
}

  .subnav-arrow {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 3px;
    margin-left:5px;
    margin-right:0px;
    transition: all 0.10s ease;
  }

  .down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

  $('.subnavbtn').hover(function(){
  $(this).children('i').toggleClass('down up');
  });
评论
  • yeum
    yeum 回复

    您不需要JS,只需删除JS代码,然后添加以下CSS:

    .subnav:hover i{
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
    }
    

    这也是您的摘录:

      
      .navbarSecond {
        overflow: hidden;
        background-color: darkgrey;
      }
    
      .navbarSecond a {
        float: left;
        font-size: 14px;
        color: white;
        text-align: center;
        padding: 10px 12px;
        text-decoration: none;
      }
    
      .subnav {
        float: left;
        overflow: hidden;
      }
    
      .subnav .subnavbtn {
        font-size: 14px;
        border: none;
        outline: none;
        color: white;
        padding: 10px 12px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
      }
    
      .navbarSecond a:hover, .subnav:hover .subnavbtn {
        background-color: black;
      }
    
      .subnav-content {
        display: none;
        position: absolute;
        left: 0;
        background-color: grey;
        width: 100%;
        z-index: 1;
      }
    
      .subnav-content a {
        float: none;
        width:200px;
        color: white;
        text-decoration: none;
        padding:5px;
        display: block;
        text-align: center;
      }
    
      .subnav-content a:hover {
        background-color: #eee;
        color: black;
      }
    
        .subnav-content .normal-subnav-links a {
            text-align: left;
        }
    
        .subnav-content .normal-subnav-links a:hover {
          background:transparent;
        }
    
      .subnav:hover .subnav-content {
        display: block;
      }
    
      .normal-subnav-links a:first-child {
      font-weight: 700;
    }
    
    
    .margin-right-subnav-links {
      margin-right:35px;
    }
    
      .subnav-arrow {
        border: solid white;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 3px;
        margin-left:5px;
        margin-right:0px;
        transition: all 0.10s ease;
      }
      
      .down {
      transform: rotate(45deg);
      -webkit-transform: rotate(45deg);
    }
    
    .up {
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
    }
    
    .subnav:hover i{
      transform: rotate(-135deg);
      -webkit-transform: rotate(-135deg);
    }
    <!DOCTYPE html>
    <html>
    <head>
      <title>SlutProjekt </title>
      <link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700%7CRaleway:400,700&display=swap"
        rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <!-- JS files: jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
    
    <body>
            <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> -->
            <div class="navbarSecond">
              <div class='container'>
              <div class="subnav">
                <button class="subnavbtn">NEW RELEASES<i class='subnav-arrow down'></i></button>
                <div class="subnav-content">
                  <div class='container'>
                    <div class='row'>
                    <div class='col-md-2 margin-right-subnav-links'>
                  <a href="#">test1</a>
                  <a href="#">test2</a>
                </div>
                </div>
                </div>
                </div>
              </div>
            </div>
          </div>
    
    
    </body>
    
    </html>
  • iaut
    iaut 回复

    You can add below jquery to your code. Take a look at this JSFiddle. Is this expected behaviour?

      $('.subnav-content').hover(function(){
        $('.subnavbtn').children('i').toggleClass('down up');
      });
    

    EDIT: I've made some changes to your existing jquery code, so take a look at this JSFiddle too.

    $('.subnavbtn, .subnav-content').hover(function(){
      $('.subnavbtn').children('i').toggleClass('down up');
    });