Question

so i was wondering if this where possible.

i am building a navigation.

<nav id="navigation">
  <div class="nav_buttons"><a href="/">home</a></div>
  <div class="nav_buttons"><a href="/system/">system</a></div>
  <div class="nav_buttons"><a href="/studies/">studies</a></div>
  <div class="nav_buttons"><a href="/approach/">approach</a></div>
  <div class="nav_buttons"><a href="/about/">about</a></div>
  <div class="nav_buttons"><a href="/contact/">contact</a></div>
</nav>

but what i would like is so that when i hover over one of them both the border of the div and the color of the < a > tags text change at the same time

i tried this

   #navigation {
     text-align: center;
     height: 150px;
     padding-top: 100px;

    }
  .nav_buttons {    
    display: inline; 
    height: 40px;
    width: 100px;
    border-bottom: 1px solid black;
    margin-left: 20px;
    }
  #navigation a{
    margin-right: 50px;
    font-size: 20px;
    text-decoration: none;
    color: black;
    }


  div.nav_buttons:hover {
    border-bottom: 1px solid #ff3300;

  }
  div.nav_buttons:hover a{
    color:#ff3300;
  }  

but that only changed the boder. i am willing to use javascript but i saw that you can change a child element buy hover overing the parent.

div#parent_element:hover div.chil_element {color: red;}

any suggestions doing it simply in CSS would be epic??

Answer 1

it depends for a matter of (previous) rule specificity, since you assigned the style with #navigation a selector. So try this

#navigation > div:hover a {
    color:#ff3300;
}

or try simply with !important

div.nav_buttons:hover a {
    color:#ff3300 !important;
}

---

As a side note: you could also avoid to use a repeated class name for every div in the markup and use instead #navigation > div to refer those elements