I am currently working on designing a navigation menu for one of my websites. My idea was to create a hover effect that would make each menu item stand out when the user interacts with it, providing them with a clear focus.
However, I noticed that once the page loads, this transition occurs on all the navigation menu items simultaneously, creating a somewhat unsettling experience and impacting the overall vibe of the website.
Here is the relevant CSS code:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>html,
body {
margin: 0;
padding: 0;
background-image: linear-gradient(to right, #2cac8c, #84a98c);
}
nav {
position: fixed;
top: 0;
width: 100%;
}
nav, nav li {
display: inline-flex;
background-color: rgb(48, 48, 48);
flex-direction: row;
font-family: 'Open Sans', sans-serif;
font-weight: 800;
font-size: 24px;
text-align: right;
color: white;
}
nav li {
margin-left: 20px;
margin-right: 20px;
transition: font-size 0.5s;
}
nav li:hover {
font-size: 30px;
}
nav ul a {
text-decoration: none;
color: white;
}
#name {
display: inline-flex;
font-size: 50px;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
margin-left: 20px;
margin-right: 1100px;
text-align: center
}<nav>
<ul>
<li id="name">Bqre</li>
<li><a href="#about">About Me</a></li>
<li>Web Design</li>
<li>Resume</li>
<li>Contact</li>
</ul>
</nav>