Bug: hover on inactive links in header

[MarPostovik]

Description In our project, we have the header, which has links to different pages of the website. But one link does not link anywhere. It is the link that tells us the name of the page, where we already are. But when we hover over it or click and hold our mouse we still see that it changes color as if it should link somewhere else. I suggest removing the styles for active and hover state for that link.

To Reproduce Steps to reproduce the behavior:

1. Go to index.html
2. Hover over the Главная link or click and hold your mouse.
3. You'll see that the link changes color to pink when hovered and to grey when clicked.

Expected behavior The link shouldn't react. There should not be any change at hover or down state because this link just shows on which page we are and does not link anywhere.

Video

https://github.com/p-foundation/pink-app/assets/126704357/0c00e6ea-b71a-46dc-ba6f-ec65dbc3410a

Desktop:

• OS: Windows
• Browser: Chrome
• Version: 122.0.6261.113

Additional context

Here is how the code for hover and active state looks like now:

.header__navigation-link:hover{
    color: rgb(178, 40, 102);
}

.header__navigation-link:active{
    color: rgb(255, 255, 255, 0.5);
}

Quick Instruction for Working on the Issue ‼️ Before checking out to a new branch, ensure you have the latest updates from the main by running git pull command.

• Please create a new branch, and name it fix-hover-on-inactive-link

• Make Changes: I recommend modifying the selector for hover and active state in the file header__navigation-link.css using CSS pseudoclass :not() to exclude header__navigation-link_active (Read about this pseudoclass here). Here is an example of using this pseudoclass in our project:

.slider__dot:not(:disabled):hover{
  background-color: rgb(233 235 236);
}

Here the background-color is applied to all elements that have the class slider__dot except of the elements that have attribute disabled.

• Test thoughtfully: In the live server check a few times that in the index.html the link that tells us "Главная" doesn't react on hover and active state.
• Open a pull request: reference the specific issue in your PR description using the following format: This pull request resolves [#issue_number](link_to_the_issue). Replace issue_number with the actual issue number and link_to_the_issue with the link to the respective issue. For example:

This pull request resolves [#123](https://github.com/username/repository/issues/123)

[naumch1k]

@MarPostovik I appreciate how well-structured and comprehensive this issue is. It's great that it provides clear steps to reproduce the behavior, making it easy for others to understand and replicate the problem. Thanks for that!

Do you think we should remove the square brackets for the selected Desktop options in the template? This minor adjustment may help us maintain a cleaner formatting style 😉 Desktop:

• OS: Windows
• Browser Chrome
• Version 122.0.6261.113

[MarPostovik]

@naumch1k I think it's a good idea 😃

[naumch1k]

@MarPostovik, also, how about suggesting a hint about addressing the problem instead of providing a direct answer?

For instance, we could recommend modifying the selector to exclude active links using the CSS pseudoclass :not(), including a link to resources explaining this pseudoclass for further learning. Rather than presenting the entire code snippet, we could offer an example of its usage from somewhere else or another part of our application and explain what it does.

This approach could provide a valuable opportunity for issue solvers to learn and apply their knowledge 😉

[MarPostovik]

@naumch1k thank you for the suggestion ❤️ . I updated the description. Does it look better now? What do you think?

[naumch1k]

@MarPostovik I think it looks great! Thank you so much for making the changes 🫶

[rasokolovska]

.take

[github-actions[bot]]

@rasokolovska 👋 Thanks for picking up this issue! 🙌 Feel free to reach out if you need any help or have questions!