CSS: Change colour of one menu-option while hovering with cursor above another menu-options

user_13573809 0
Viewed 106

I'm trying to figure out how I can change the colour of font and background colour of the "Register" section when I hover with the mouse cursor over the other 3 options ('Login', 'About' and 'language'). I want it only to change the colours when one of the three other options are selected.

.main-menu {
  width: 170px;
}

.floating-menu {
  margin: 0 auto;
  right: 26px;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 35%;
}

.floating-menu div a {
  /**text-align: center;**/
  text-decoration: none;
  outline: none;
  line-height: 2em;
  display: block;
  padding: 7px;
  border-radius: auto;
  position: relative;
  top: 10px;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.main-menu a {
  background-color: #fff;
  color: #444950;
  display: block;
  padding: 12px;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 18;
  font-weight: bold;
  border-radius: 9px;
}

.main-menu a:hover {
  background-color: #eee;
  color: #00B200;
}

.main-menu a.active {
  background-color: #eee;
  color: #00B200;
}

.main-menu a.active:hover {
  background-color: #00B200;
  color: #fff;
}
<div class="main-menu">
  <a href="#">Log In</a>
  <a href="#" class="active">Register</a>
  <a href="#">About</a>
  <a href="#">Language</a>
</div>

css html
2 Answers

As you only want this to happen for the "Register" option only, you will need to add another class to it so it can be identified when we want to apply this styling to is.

So first add a class to the link in addition to the active class e.g.

<a href="#" class="active register-link">Register</a>

Now you need to add a style for that link that will activate when you hover over any link - we can achieve this by applying the style on the whole ul when it is hovered. e.g.:

.main-menu:hover a.register-link{
  color: #0095ff;
  background: #000;
}

Now when we do that, it means that the register link itself stays black and blue even when you hover over it:

  • If you want the Register link to be the normal green colour on hover, make sure you add the above style BEFORE the .main-menu a.active:hover in your CSS.
  • If you want the Register link to stay black and blue on hover, make sure you add the above style AFTER the .main-menu a.active:hover in your CSS.

.main-menu {
  width: 170px;
}

.floating-menu {
  margin: 0 auto;
  right: 26px;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 35%;
}

.floating-menu div a {
  /**text-align: center;**/
  text-decoration: none;
  outline: none;
  line-height: 2em;
  display: block;
  padding: 7px;
  border-radius: auto;
  position: relative;
  top: 10px;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.main-menu a {
  background-color: #fff;
  color: #444950;
  display: block;
  padding: 12px;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 18;
  font-weight: bold;
  border-radius: 9px;
}

.main-menu a:hover {
  background-color: #eee;
  color: #00B200;
}

.main-menu a.active {
  background-color: #eee;
  color: #00B200;
}


/* if you want the Register link to be green (the normal hover colour) 
   when it is hovered add this BEFORE the .main-menu a.active CSS */

.main-menu:hover a.register-link {
  color: #0095ff;
  background: #000;
}

.main-menu a.active:hover {
  background-color: #00B200;
  color: #fff;
}


/* ALTERNATIVELY */


/* if you want the Register link to stay black and blue  when it's hovered 
   add this AFTER the .main-menu a.active CSS */


/*
.main-menu:hover a.register-link{
  color: #0095ff;
  background: #000;
}
*/
<div class="main-menu">
  <a href="#">Log In</a>
  <a href="#" class="active register-link">Register</a>
  <a href="#">About</a>
  <a href="#">Language</a>
</div>

If you want to apply the style only when the Register link is active: In this case, you, would apply the style using .main-menu:hover a.active.register-link.

If you want the Register link to go green on hover, you'll also need to add .main-menu:hover a.active.register-link:hover to the existing .main-menu a.active:hover rule.

Code for this case:

.main-menu {
  width: 170px;
}

.floating-menu {
  margin: 0 auto;
  right: 26px;
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 35%;
}

.floating-menu div a {
  /**text-align: center;**/
  text-decoration: none;
  outline: none;
  line-height: 2em;
  display: block;
  padding: 7px;
  border-radius: auto;
  position: relative;
  top: 10px;
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}

.main-menu a {
  background-color: #fff;
  color: #444950;
  display: block;
  padding: 12px;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 18;
  font-weight: bold;
  border-radius: 9px;
}

.main-menu a:hover {
  background-color: #eee;
  color: #00B200;
}

.main-menu a.active {
  background-color: #eee;
  color: #00B200;
}

.main-menu:hover a.active.register-link {
  color: #0095ff;
  background: #000;
}

.main-menu:hover a.active.register-link:hover,
.main-menu a.active:hover {
  background-color: #00B200;
  color: #fff;
}
<div class="main-menu">
  <a href="#">Log In</a>
  <a href="#" class="active register-link">Register</a>
  <a href="#">About</a>
  <a href="#">Language</a>
</div>

user_5148780

If I understand your question, you can easily do this by adding following code:

.main-menu a:hover {
  background-color: #eee!important;
  color: #00B200!important;
}

.main-menu:hover .register {
  background-color: #00B200;
  color: #fff;
}

<div class="main-menu">
  <a href="#">Log In</a>
  <a href="#" class="register">Register</a>
  <a href="#">About</a>
  <a href="#">Language</a>
</div>
user_63515810
Related