Question

因此，我试图用假元素在鼠标悬停时在菜单链接上加下划线，但它无法正常工作。将鼠标悬停在菜单链接上时，将显示after元素，但将贯穿col div的整个宽度，而不是仅在链接下方。下面的代码：

<div class="container-fluid">
    <div class="cover">      
       <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="logo"><span>CS</span></div>
                </div>
                <div class="col-md-8">
                    <nav id="menu" class="menu">
                        <ul>
                            <li class="menu-item">
                                <a class="active" href="#">Link 1</a>
                            </li>
                            <li class="menu-item">
                                <a href="#">Link 2</a>
                            </li>
                            <li class="menu-item">
                                <a href="#">Link 3</a>
                            </li>
                            <li class="menu-item">
                                <a href="#">Link 4</a>
                            </li>
                            <li class="menu-item">
                                <a href="#">Link 5</a>
                            </li>
                        </ul>
                        <ul>
                            <li class="social-icon"><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                            <li class="social-icon"><a href="#"><i class="fab fa-twitter"></i></a></li>
                            <li class="social-icon"><a href="#"><i class="fab fa-skype"></i></a></li>
                            <li class="social-icon"><a href="#"><i class="fab fa-linkedin-in"></i></a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>     
</div>

CSS：

        html, body {
        margin: 0;
        font-family: "Myriad Pro", serif;
    }


    .slicknav_menu {
        display:none;
    }
    .container-fluid {
        padding: 0;
    }
    .menu {
        margin-top: 45px;
    }
    .cover {
         background-image: url("../img/cover.png");
      background-size: cover;
      height: 100vh;
      overflow: auto;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
    }

    .menu > ul {
        list-style: none;
        display: inline;

    }
    .menu >ul > li {
        display: inline-block;


    }
    .menu-item {
        margin-right: 47px;
    }
    nav ul .menu-item a:after{
        position: absolute;
      content: '';
      height: 2px;
      bottom: -15px;
      /*margin: 0 auto;*/
        left: 0;
      right: 0;
        width: 0%;
      -o-transition:.5s;
      -ms-transition:.5s;
      -moz-transition:.5s;
      -webkit-transition:.5s;
      transition:.5s;
    }
    nav ul .menu-item a:hover:after {
        width: 100%;
      background: #e50606;
    }
    /*nav ul li a:after {
      position: absolute;
      content: '';
      height: 2px;
      bottom: -15px;
      margin: 0 auto;
        left: 0;
      right: 0;
        width: 0%;
      -o-transition:.5s;
      -ms-transition:.5s;
      -moz-transition:.5s;
      -webkit-transition:.5s;
      transition:.5s;
    }
    nav ul li a:hover:after {
      width: 100%;
      background: #e50606;
    }*/
    .menu > ul > li > a {
        text-decoration: none;
        color: #fff;
    }
    .menu ul li a:hover {
        color: #11749E;
    }
    .logo {
        position: relative;
        margin: 22px 0 0 50px;
        width: 67px;
        height: 67px;
        background-color: #11749e;
    -webkit-box-shadow: 12px 8px 0px 0px rgba(255,255,255,0.5);
    -moz-box-shadow: 12px 8px 0px 0px rgba(255,255,255,0.5);
    box-shadow: 12px 8px 0px 0px rgba(255,255,255,0.5);
    }
    .logo span {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        font-size: 30px;
        color: #fff;

    }
    .social-icon {
        margin-right: 30px;
    }



    @media screen and (max-width: 991px) {
        /* #menu is the original menu */
         #menu {
            display:none;
        }

         .slicknav_menu {
            display:block;
        }
    }

此CSS在其他网站上有效，无法找到为什么现在不起作用。

Answer 1

我不知道这是否是您想要的，但是我稍微编辑了您的nav部分代码。使:hover放在li或.menu-item上而不是a标记上，并在position: relative li >

.menu > ul {
  list-style: none;
  display: inline;
}

.menu > ul > li {
  display: inline-block;
}

.menu-item {
  margin-right: 47px;
}

nav ul .menu-item:hover:after {
  width: 100%;
  background: black;
}

nav ul li:after {
  position: absolute;
  content: "";
  height: 2px;
  bottom: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
  width: 0%;
  -o-transition: 0.5s;
  -ms-transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

li {
  position: relative;
}

<nav id="menu" class="menu">
  <ul>
    <li class="menu-item">
      <a class="active" href="#">Link 1</a>
    </li>
    <li class="menu-item">
      <a href="#">Link 2</a>
    </li>
    <li class="menu-item">
      <a href="#">Link 3</a>
    </li>
    <li class="menu-item">
      <a href="#">Link 4</a>
    </li>
    <li class="menu-item">
      <a href="#">Link 5</a>
    </li>
  </ul>
</nav>

在伪元素未按应显示后

1 个答案: