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

Html – How to style siblings on hover in CSS?

I am trying to apply a CSS color change on the siblings of a list of links under the following format:

<ul>
  {{ range .Pages }}
    <h2>
       <a class="item" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
    </h2>
  {{ end }}
</ul>

As I am working on Hugo, the list of links is the index of files in the folder, in this example there is a folder with 4 articles. In this case, I range over the pages of the folder (ie the 4 articles) which ends up being something like this:

.list-items a:hover.item:not(:hover) {
  color: lightgray;
}

.item {
  color: black;
  transition: color 0.3s ease;
}
<ul class="list-items">
  <h2>
    <a class="item" href="article1">Article1 Title</a>
  </h2>
  <h2>
    <a class="item" href="article2">Article2 Title</a>
  </h2>
  <h2>
    <a class="item" href="article3">Article3 Title</a>
  </h2>
  <h2>
    <a class="item" href="article4">Article4 Title</a>
  </h2>
</ul>

More articles will be added in the future, so the goal is to have all the links in black by default and when hovering, the one being hovered remains black while all the siblings color changes to lightgray.

I unfortunately haven’t been able to apply the desired effect with the following CSS:

.item {
  color: black;
  transition: color 0.3s ease;
}

.list-items a:hover.item:not(:hover) {
  color: lightgray;
}

I have tried the following code:

.item {
  color: black;
  transition: color 0.3s ease;
}

.list-item a:hover.item:not(:hover) {
  color: lightgray;
}

and:

.item {
  color: black;
  transition: color 0.3s ease;
}

.list-item:hover.item:not(:hover) {
  color: lightgray;
}

Any clue what I’m missing?

Thanks!

Tags:

3

Answers


  1. 0

    It looks like there’s a small mistake in the class selector used in your CSS. The class name in your HTML is list-items, but in your CSS, you’re using .list-item. Let’s correct that and also adjust the CSS to achieve the effect you’re looking for.

    Here’s the corrected CSS:

    .item {
color: black;
transition: color 0.3s ease;
}

.list-items:hover .item {
color: lightgray;
}

.list-items .item:hover {
color: black;
}

    This CSS will make all .item links within .list-items turn light gray when any part of .list-items is hovered over. However, the specific .item that is being hovered over will remain black. The transition will apply for a smooth color change effect.

    Login or Signup to reply.
  2. 0

    and when hovering, the one being hovered remains black while all the siblings color changes to lightgray

    .list-items:hover .item { color: lightgray; } to change the color of all items, when the container gets hovered, and .list-items .item:hover { color: black; } to re-set it to black for the specific link that is hovered.

    Login or Signup to reply.
  3. 0

    Here I replaced the <h2> with proper <li> since nesting the h2 in the ul is invalid. I then adjusted the CSS to have the same style as the H2 and fixed the hover syntax in the CSS.

    .list-items a:hover {
  color: lightgray;
}

.item {
  color: black;
  transition: color 0.3s ease;
}

.list-header {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
    <ul class="list-items">
  <li class="list-header">
    <a class="item" href="article1">Article1 Title</a>
  </li>
  <li class="list-header">
    <a class="item" href="article2">Article2 Title</a>
  </li>
  <li class="list-header">
    <a class="item" href="article3">Article3 Title</a>
  </li>
  <li class="list-header">
    <a class="item" href="article4">Article4 Title</a>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search