How can make so css doesn't move the whole page when I hover over a word?

问题: I was making my css and I made a div called navbar so I could edit the hole navbar and align it to the center but when i added a hover for each class in the navbar it was m...

问题:

I was making my css and I made a div called navbar so I could edit the hole navbar and align it to the center but when i added a hover for each class in the navbar it was moving all the page instead of moving only the word it was supposed to. Doesn't need to be 100% css or html if needed i can add JavaScript!

body{
  background-color: white;
  width: 100%;
  height: 100%;
}

#navbar{
  text-align: center;
  font-size: 18px;
  margin-top: 50px;
  word-spacing: 40px;
  font-family: Segoe UI Light;
}

.homenavbar, .portfolio, .certificates, .contact{
  color: black;
  text-decoration: none;
}

.hireme{
  position: relative;
  color: black;
  word-spacing: 0px;
  text-decoration: none;
  left: 300px;
  border-style: solid;
  border-color: gray;
  border-radius: 10px;
  border-width: 1px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 15px;
  padding-right: 15px;
}

.hireme:hover{
  position: relative;
  color: orange;
  word-spacing: 0px;
  font-size: 22px;
  text-decoration: none;
  left: 300px;
  border-style: solid;
  border-color: gray;
  border-radius: 14px;
  border-width: 1px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 19px;
  padding-right: 19px;
}

.homenavbar:hover, .portfolio:hover, .contact:hover, .certificates:hover{
  color: orange;
  font-size: 22px;
  text-decoration: none;
}

.logo{
  position: relative;
  top: 23px;
  right: 150px;
  width: 4%;
  height: auto;
}
<!DOCTYPE html>
{% load staticfiles %}
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title> *António Gonçalves*</title>
    <link rel="stylesheet" href="{% static "css/index.css" %}">
    <link rel="shortcut icon" type="image/png" href="{% static "images/favicon.png" %}">
    <style>
      @font-face { font-family: 'Segoe UI'; src: local("{% static  "font/Segoe-UI" %}"), url('segoeui.woff') format('woff');}
      @font-face { font-family: "Segoe UI Light"; src: local("{% static  "font/Segoe-UI-Light" %}"), url("segoeuil.ttf") format("ttf")}
    </style>
  </head>
  <body>
    <div id="navbar">
      <img class="logo" src="{% static "images/favicon.png" %}" alt="Logo not found">
      <a class="homenavbar" href="{% url 'home' %}">HOME</a>
      <a class="portfolio" href="{% url 'portfolio' %}">PORTFOLIO</a>
      <a class="certificates" href="{% url 'certificate' %}">CERTIFICATES</a>
      <a class="contact" href="{% url 'contact' %}">CONTACT</a>
      <a class="hireme" href="{% url 'hire' %}">HIRE ME</a>
    </div>
    <div class="home">
      <div>
        <p class="UIUX">UI / UX</p>
        <p class="design">DESIGN</p>
        <img class="uiline" src="{% static "images/line.png" %}" alt="Line not found">
      </div>
      <div>
        <img class="me" src="{% static "images/me.png" %}" alt="Beautiful guy not found!">
        <p class="p1">Hi, my name is António Gonçalves.</p>
        <p class="p2">I´m a UX/UI Designer that is specialized on Front-end <br>and Back-end development.</p>
        <div class="skillset">
          <p class="skills">SKILLS</p>
          <p class="skillp">HTML, CSS, JavaScript, Python, Django, SQLlite</p>
        </div>
        <div class="softwareset">
          <p class="software">SOFTWARE</p>
          <p class="softwarep">Adob XD, ATOM</p>
        </div>
        <div class="languageset">
          <p class="language">LANGUAGE</p>
          <p class="languagep">Portuguese, English</p>
        </div>
      </div>
    </div>
  </body>
</html>


回答1:

Instead of changing the font size, you can use a scale transform. Check out the answer to this similar question: Increasing font size without moving other text.

  • 发表于 2019-02-25 04:23
  • 阅读 ( 180 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除