CSS on:hover changing childs attributes

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??

Answers


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


Your code is fine. But I think some existing styles are overriding your current style. So I suggest to use relative styling technique like below to achieve the desired result:

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

  }

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

See a DEMO


Need Your Help

scala & intellij : difficulties to create a runnnable jar

scala intellij-idea build artifacts uberjar

I can't launch a scala jar; when I launch it I get the error "Exception in thread "main" java.lang.NoClassDefFoundError: scala/collection/immutable/List" which seems to mean the scala library is not

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.