locked
why li hover fade in (out in only second one) RRS feed

  • Question

  • User-1045082127 posted

    according to the title why my code work for only second one:

          <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="#"><img src="Img/Logo.jpg" id="logo" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
              <div class="mr-auto"></div>
              <ul class="navbar-nav">
                <li class="nav-item active menu">
                  <a class="nav-link font-Byekan" href="#">صــفحه اصــلی</a>
                </li>
                <li class="nav-item menu">----------------------------------> this is second one
                  <a class="nav-link font-Byekan" href="#">مقــالات</a>
                </li>
                <li class="nav-item menu">
                  <a class="nav-link font-Byekan" href="#">نــمونه کارهــا</a>
                </li>
                <li class="nav-item menu">
                  <a class="nav-link font-Byekan" href="#">درباره مــا</a>
                </li>
              </ul>
              <div class="ml-auto"></div>
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="#"><i class="fab fa-instagram social"></i></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#"><i class="fab fa-twitter social"></i></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#"><i class="fab fa-google-plus-g social"></i></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#"><i class="fab fa-linkedin-in social"></i></a>
                </li>
              </ul>
            </div>
          </nav>
    .menu::before
    {
      background:  #dad410;
      content: "";
      ;
      top:50%;
      left: 50%;
      transform:  translate(-50%,-50%);
      z-index:-1;
      transition: all 0.3s ease;
    
    }
    .menu::before{
      width: 0;
      height: 100px;
    }
    .menu:hover::before
    {
    
      width: 100px;
    }

    Sunday, March 15, 2020 8:10 PM

Answers

  • User415553908 posted

    Oh, I think the issue is your yellow blob is absolutely positioned.

    try changing display property of parent element:

    .menu {
      ;
    }

    this should set location context for your absolutely positioned highlight.

    read more about this positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 17, 2020 7:11 AM

All replies

  • User415553908 posted

    do you mind elaborating a bit more in what is the current/expected behaviour?
    what other CSS libraries have you got included? (I will assume you've got Bootstrap for now) 

    ideally - if you could create a *minimal* example of the issue in codepen (or jsfiddle or any other service)

    Sunday, March 15, 2020 8:20 PM
  • User-1045082127 posted

    I was selected نمونه کارها but مقالات is selected

    Show Image On Google Drive

    Monday, March 16, 2020 9:33 PM
  • User415553908 posted

    Oh, I think the issue is your yellow blob is absolutely positioned.

    try changing display property of parent element:

    .menu {
      ;
    }

    this should set location context for your absolutely positioned highlight.

    read more about this positioning here: https://developer.mozilla.org/en-US/docs/Web/CSS/position

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, March 17, 2020 7:11 AM