Question

我正在尝试让这个HTML Navbar显示内联并且有悬停效果有没有办法做到这一点？

这是我的HTML

<nav class="navbar navbar-light bg-faded" style="background-color: #c8c8c8">
<div class="container-fluid d-inline-block" >
  <a class="navbar-brand" href="#">
    <img src="logo/new.png" width="30" height="30" class="d-inline-block " alt="">
    NEW
  </a>
  <a class="navbar-brand" href="#">
    <img src="logo/copy.png" width="30" height="30" class="d-inline-block" alt="">
    COPY
  </a>
  </div>
</nav>

Answer 1

您可以使用css文件制作悬停动画：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
</head>
<body>

    <nav class="navbar navbar-light bg-faded" style="background-color: #c8c8c8">
        <div class="container-fluid d-inline-block" >
            <a class="navbar-brand" href="#">
                <img src="logo/new.png" width="30" height="30" class="d-inline-block " alt="">
                NEW
            </a>
            <a class="navbar-brand" href="#">
                <img src="logo/copy.png" width="30" height="30" class="d-inline-block" alt="">
                COPY
            </a>
        </div>
    </nav>

</body>
</html>

CSS：

.navbar-brand:hover {
    background-color: blue;
}

.d-inline-block {
    display: inline-block;
}

Answer 2

如果你想要一个bootstrap解决方案，试试navbar-link。这是documentation

<nav class="navbar navbar-light bg-faded" style="background-color: #c8c8c8">
<div class="container-fluid d-inline-block" >
  <a class="navbar-link" href="#">
    <img src="logo/new.png" width="30" height="30" class="d-inline-block " alt="">
    NEW
  </a>
  <a class="navbar-link" href="#">
    <img src="logo/copy.png" width="30" height="30" class="d-inline-block" alt="">
    COPY
  </a>
  </div>
</nav>

如何使NAV内联悬停

2 个答案: