css Question posted in
Some basic documentation can be found here.

How do I change text color when hover with css?

.header {
    background-color: #050a13;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1rem;
    display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header__logo__img {
  width: 24px;
  height: 24px;
}

.header__logo__title {
  font-size: 1.8rem;
}

.header__logo__title:hover {
  font-size: 3rem;
  background-color: var(--color-accent);
  color: var(--color-accent);
}

I tried to change text color when hovered but it doesn’t work.
It changes its background-color or font-size, but not the color.

a {
  text-decoration: none;
  color: var(--color-text);
}

I think the problem is somewhat related to this. I selected the text color of all a tag here.

[HTML] 
<header class="header">
      <div class="header__logo">
        <img class="header__logo__img" src="images/profile3.png" alt="logo" />
        <h1 class="header__logo__title"><a href="#">Name</a></h1>
      </div>

I just started html and css. Please give me any advice. I have no idea why it’s not working.

Tags:

2

Answers


  1. 0

    It looks like you haven’t defined the named variables, so when you reference them using the var function, it fails.

    You need to either replace the var(...) references with static color codes, or in the root you need to define the variables:

    :root {
  --color-text: #1e90ff;
  --color-accent: #330033;
}

// the rest of your css

    Read more about CSS Variables here

    You have a new problem though, you have defined the background and the foreground as the same color, so this will just look like a block of color, consider only setting one of these attributes, or setting them to different values:

    .header_logo_title:hover {
  font-size: 3rem;
  //background-color: var( --color-accent);
  color: var( --color-accent);
}
    Login or Signup to reply.
  2. 0

    Here is a basic working example. Build up from there.

    a {
  color: red;
}

a:hover {
  color: blue;
}
    <a href="">this is a link</a>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search