首页 / 技术问答 / Html问答列表 / 问答详情

Html 如何避免链接在悬停 timeshift 动，同时增加导航栏中的字体大小

我想为我的网站创建一个导航栏，其中包括一些链接和它上的公司标志.链接应该有定制的间距在他们和意味着一些首先和一些最后的右边.我还想包括一个转换，当链接悬停时，链接的字体大小增加，而不影响或移动附近的链接或内容.我遇到了一个问题，因为字体增加了，邻居链接自己改变了，以保持利润率差距.我应该在代码中更改或添加什么才能做到这一点？

我基本上是try 使用链接‘a’的悬停子类.它起到了作用，但并不完美，它改变了邻国的联系.我使用每个链接的左边距和右边距，并 for each 链接分配唯一的边距.当我将鼠标悬停在一个链接上时，其他每个链接都会自动切换以保持各自的边距.我认为在这种情况下使用边距属性好吗，或者我应该使用浮动如果是，那么如何在特定距离对齐它们.我在结束时提供了我的代码的在线编辑链接.

或者下面是我的部分css代码

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    background-color: #f7f7f7;
    margin: 0;
}

header {
    background-color: black;
}

.navigation-bar {
    width: 100%;
    height: 76px;
    display: flex;
    padding: 10px;
    align-items: center;
}

.logo img {
    position: relative;
    left: 20%;
    height: 80px;
    width: auto;
}

.navigation-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navigation-links li {
    display: inline-block;
    margin-left: 90px;
    margin-right: 0px;
}

.navigation-links li a {
    font-size: 25px;
    color: white;
    text-decoration: none;
    text-align: center;
}

.navigation-links li a:hover {
    font-size: 30px;
}

/* join now class    */
.navigation-links li a.special1 {
    font-size: 25px;
    font-weight: bold;
    color: white;
    margin-left: 60px;
    margin-right: 0px;
    text-decoration: none;
    border: 2px solid rgb(226, 19, 54);
    border-radius: 50px;
    padding: 15px 10px;
    background-color: rgb(226, 19, 54);
}

/* login class */
.navigation-links li a.special2 {
    font-size: 25px;
    font-weight: bold;
    color: white;
    margin-left: 2px;
    margin-right: 0px;
    text-decoration: none;
    border: 2px solid white;
    border-radius: 50px;
    padding: 15px 40px;
    background-color: black;
}

/*resposive nature*/
@media screen and (max-width: 768px) {
    .navigation-links {
        display: none;
    }
}
<!DOCTYPE html>
<html lang="en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">

    <head>
      <title>Navigation Bar Example</title>
      <link rel="stylesheet" type="text/css" href="styles2.css">
    </head>
    <body>
        <header>
            <div>
                <nav class="navigation-bar">
                    <div class="logo">
                        <img src="rocket-g9cbacc798_1280.png" alt="Company Logo" > 
                    </div>
                    <ul class="navigation-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">About</a></li>
                        <li ><a class="special1"href="#">JOIN NOW</a></li>
                        <li ><a class="special2" href="#">LOG IN</a></li>
                    </ul>

                </nav>
            </div>
        </header>
        <!-- Rest of the content -->
    </body>
</html>

代码链接-https://codepen.io/Divyansh-Sharma-the-flexboxer/pen/JjmgJVy

推荐答案

在下面的例子中，有许多苦行的改变是可选的.以下是必需的css:

li {
  /* Start vertically and horizontally center of `<li>` when transforming */
  transform-origin: center center;
  /* Original state is at normal size */
  transform: scale(1.0); 
  /* When state changes, stretch the duration by 0.7 seconds in a easing pattern */ 
  transition: 0.7s ease /* ✥ */;
}

/* When the user hovers over a <li>... */
li:hover {
  /* ...take it out of the normal "flow" of the document... */
  position: relative;
  /* ...give it a higher position on the z-axis... */
  z-index: 1;
  /* ...increase it's size by 20% */
  transform: scale(1.2) /* ✥ */;
}
/* ✥ Values can vary according to preference */

最初，每个<li>都是惰性的，但当它悬停在上方时会有指令.当<li>悬停在文档的正常"流"之外时，它的大小不会干扰任何"静态"元素(没有position: relative/absolute/fixed/sticky的任何元素).

Note:请在Full Page模式下查看该示例，在IFRAME中查看不能完美呈现(链接太小).

:root {
  margin: 0;
  font: 5vmin/1.15 Lato;
}

body {
  min-height: 100vh;
  margin: 0;
  background-color: #f7f7f7;
}

header {
  background-color: black;
}

nav {
  display: flex;
  align-items: center;
  width: 100%;
  height: clamp(3ex 80px 10vh);
}

nav img {
  display: inline-block;
  width: 20vw;
  height: auto;
  margin-right: 1rem;
}

menu {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

menu li {
  margin-right: 1.5rem;
  text-align: center;
  transform-origin: center center;
  transform: scale(1.0);
  transition: 0.7s ease;
}

menu li a {
  font-size: clamp(5rem 8vw 10rem);
  color: white;
  text-decoration: none;
}

menu li:hover {
  position: relative;
  z-index: 1;
  transform: scale(1.2);
}

.btn {
  min-width: 3rem;
  margin-right: 0.75rem;
  padding: 0.25rem 0.5rem;
  border: 2px solid rgb(226, 19, 54);
  border-radius: 50px;
  font-weight: bold;
  font-variant: small-caps;
}

.join {
  background-color: rgb(226, 19, 54);
}

.login {
  background-color: black;
}

@media screen and (max-width: 300px) {
  menu {
    display: none;
  }
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Navigation Bar Example</title>
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>

<body>
  <header>
    <nav>
      <img src="https://www.clipartmax.com/png/middle/31-316935_universe-rocket-icon-svg.png
" alt="Company Logo">
      <menu>
        <li><a href="#">Home</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About</a></li>
        <li class="btn join"><a href="#">Join Now</a></li>
        <li class="btn login"><a href="#">Log In</a></li>
      </menu>
    </nav>
  </header>
  <!-- Rest of the content -->
</body>

</html>

Html相关问答推荐

需要关于HTML的建议

为什么在移动视图中，这个水平可滚动的表格会在表格的右侧显示额外的空间？

有没有办法根据另一个项目调整FlexBox项目的大小？

如果浏览器通过http接收html，为什么客户端内置表单验证不起作用？

使具有FLEX父项的溢出自动的子元素收缩

：invalid Select 器的惰性判断

如何根据剪辑路径边缘设置文本边距？

文本不显示在 div 下方

防止HTML输入中出现负数但接受小数

需要帮助个性化我的 CSS 导航栏：如何在鼠标悬停时突出显示
  • 元素？

    • 如何更改 Quarto 中标签crossref-def-title的标题 colored颜色 ？

    在锥形渐变进度条内创建空白的问题

    将图像高度调整到容器 div 中而不使其高度增加

    图像比预期宽的网格列

    那边界从何而来？

    在