Change text colors when hovering over another text-CodePudding

I'm trying to do the menu bar for my portfolio,but i don't figure out how to change the non-hovered text color when hovering on one of the texts, my english isn't very good, so i did a little example on illustrator.

The first image is what i want to do, and the second one is how it looks right now.

here is the code (ignore the logo, it doesn't appear on the code and it needs no change):

HTML:

<nav id="menu">

        <ul>
            <li ><a  href="index.html#works">Works</a></li>
        </ul>

        <ul>
            <li ><a  href="index.html#about">About</a></li>
        </ul>

        <ul>
            <li ><a  href="index.html#newsletter">Newsletter</a></li>
        </ul>
    </nav>

CSS:

a {
    text-decoration: none;
}

#menu {
    margin-top: 20px;
    height: 60px;
    background-color: #1a1a1a;
}

.boto_menu {
    list-style: none;
    float:left;
    margin-left:20.4%;
    margin-top: 11px;
    font-family: 'amador';
}
    
.link_menu_works{
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}


.link_menu_about{
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}

.link_menu_newsletter{
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}

Thank you guys for your help! I've been almost a year without coding and i barely remember anything, so your help means a lot! <3

CodePudding user response：

add :hover after your three classes

.link_menu_works:hover {
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}


.link_menu_about:hover {
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}

.link_menu_newsletter:hover {
    color: #e1a9ff;
    text-decoration: none;
    font-size: 2em;
}

CodePudding user response：

You need to use :hover in your CSS https://developer.mozilla.org/en-US/docs/Web/CSS/:hover

There is no need to separate classes for every link. Change it to one class

Example

.link_menu {
  color: #e1a9ff;
  text-decoration: none;
  font-size: 2em;
}
.link_menu:hover {
  color: #c01313;
}

CodePudding user response：

Instead of the separate links you can hover the link container.

:root {
  text-align: center;
}
.links:hover {
  color: green;
}
.links {
  background: lightgrey;
  display: inline;
  padding: 10px;
}
a {
  margin: 0 10px 0 10px;
  font-size: 20px;
}

<div >
  <a>Link1</a>
  <a>Link2</a>
  <a>Link3</a>
</div>

CodePudding user response：

If "li" is an object in the same location, it would be better to put it in one place.

Select the color code for "a" as the color you want to show before "mouse hover".

And if you use the ":hover" code and input the color code to be exposed when "mouse hover",

it will be displayed like the image you attached.

I didn't speak English well, so I used a translator.

Please understand even if the text is not smooth:)

ul,li {
    margin: 0; 
    padding: 0; 
    list-style: 0; 
}

a {
    text-decoration: none;
}

#menu {
    margin: 20px 0 0;
    padding: 25px 0; 
    background: #1a1a1a;
}

#menu ul {
    text-align: center; 
    font-family: 'amador';
}
    
#menu ul li {
    display: inline-block;
    margin: 0 20px;
    font-size: 2em;
    color: #e1a9ff;
}
#menu ul li a {
    color: #bcbcbc; 
}
#menu ul li a:hover {
    color: #e1a9ff; 
}

<nav id="menu">
        <ul>
            <li><a href="index.html#works">Works</a></li> 
            <li><a href="index.html#about">About</a></li> 
            <li><a href="index.html#newsletter">Newsletter</a></li>
        </ul>
</nav>

CodePudding user response：

Use the :hover selector

https://www.w3schools.com/cssref/sel_hover.asp

.link_menu_about:hover {
    color: pink;
    text-decoration: none;
    font-size: 2em;
}