CODEWITHSUNDEEP
htmlcss
Bienfait Kirivita
Bienfait Kirivita

Reputation: 9

How do I limit hover to not apply to all the links at once?

I am currently building a website but having trouble with the links display when I apply hover (CSS+HTML5). How do I stop the hover to apply on all the links that are on the same line at once? like I want the hover to apply to the pointed link only and not all of them at once. The links are on the navigation bar. Please help me.

Here is what my program looks like:

a:link {
  color: white;
  padding: 10px;
}

nav:hover {
  background-color: #ff3399;
}
<nav>
  <a href="/home/">HOME</a>
  <a href="/marchendise/">MARCHENDISE</a>
  <a href="/transportation/">TRANSPORTATION</a>
  <a href="/ciment/">CIMENT</a>
  <a href="/locations/">LOCATIONS</a>
  <a href="/laiterie/">LAITERIE</a>
  <a href="/contacts/">CONTACTS</a>
</nav>

Upvotes: 0

Views: 108

Answers (2)

לבני מלכה
לבני מלכה

Reputation: 16251

you have to be spesific
I recommand you to learn more about selector in css:https://www.w3schools.com/cssref/css_selectors.asp 

nav a:hover{
color:red
}
<nav> <a href="/home/">HOME</a> 
<a href="/marchendise/">MARCHENDISE</a>
<a href="/transportation/">TRANSPORTATION</a>
<a href="/ciment/">CIMENT</a> 
<a href="/locations/">LOCATIONS</a> 
<a href="/laiterie/">LAITERIE</a>
<a href="/contacts/">CONTACTS</a> 
</nav>

Upvotes: 0

Bhuwan
Bhuwan

Reputation: 16855

You are applying background to the nav element on hover i.e nav:hover, not to <a>.

Just use a:hover

a:link {
  color: #000;
  padding: 0 10px;
}

a:hover {
  color: #fff;
  background-color: #ff3399;
}
<nav>
  <a href="/home/">HOME</a>
  <a href="/marchendise/">MARCHENDISE</a>
  <a href="/transportation/">TRANSPORTATION</a>
  <a href="/ciment/">CIMENT</a>
  <a href="/locations/">LOCATIONS</a>
  <a href="/laiterie/">LAITERIE</a>
  <a href="/contacts/">CONTACTS</a>
</nav>

Upvotes: 2

Related Questions