Change the colour of text simultaneously

Question

So I spent way too long trying to figure out how to change the colour of the background when I hover over the navigation, then I realised that I would also need to change the colour of the existing text to make it visible when the navigation was hovered over. I have no clue how to accomplish this though. My code is below:

<DOCTYPE! html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>Jasmine Everett</title>
            <meta name="description" content="graphic designer just trying to get through life">
            <link rel="stylesheet" href="main.css">
            <link href="css/style.css" media="all" rel="stylesheet" »
          type="text/css" />
        </head>
        <body>
            <h2 align="center" class="change"> JASMINE EVERETT</h2>
            <h3 align="center" class="change"><em>Graphic Designer</em></h3>
                <ul class="nav">
                    <button><a  class="special" href="work.html">WORK</a></button> |
                    <button><a class="special" href="about.html">ABOUT</a></button> |
                    <button><a class="special" href="contact.html">CONTACT</a></button>
                </ul>
        </html>

CSS

.special{
    background: transparent;
    display: inline-block;
}

.special:before{
    background-color: transparent;
    transition; background-color 0.2s ease,opacity;
    content: '';
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index: -1;
    opacity: 0;
}
.special:hover:before{
    position:fixed;
    transition: background-color 0.2s ease, opacity;
    opacity: 1;
}
.special:hover:before{
    background-color: black;
}


button{border: none;
    background: white;
    color: black;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    transition: all 500ms ease; 
}

button:hover {
    background: rgba(0,0,0,0);
    color: white;
    box-shadow: inset 0 0 0 3px white;
}

Possible duplicate: https://stackoverflow.com/questions/3741157/change-background-color-on-mouseover-and-remove-it-after-mouseout — Rishikesh Dhokare, Jan 12 '18 at 06:10
Possible duplicate of [Text color change on hover over button](https://stackoverflow.com/questions/12139546/text-color-change-on-hover-over-button) — Geshode, Jan 12 '18 at 06:11

score 1 · Answer 1 · answered Jan 12 '18 at 06:12

1

Just change the color attribute on hover like this it will work.

.special:hover:before{
    background-color: black;
    color: #000000;
}

answered Jan 12 '18 at 06:12

Jai Prak

2,855
4
29
37

mry · Accepted Answer · 2018-01-12T18:00:25.940

0

Update: using jQuery on hover assign class to elements you want to set style of.

updated fiddle:

https://jsfiddle.net/brb48wb1/2/

is this what you want to acheive?

if yes, just add following in your css

.special:hover{
  color:#FFF;
 }

edited Jan 12 '18 at 18:00

answered Jan 12 '18 at 06:44

mry

314
2
11

This is what I want to do but with the two headers aswell – jasmine_e Jan 12 '18 at 16:53

Change the colour of text simultaneously

2 Answers2