CODEWITHSUNDEEP
csshtmlhoverparent-child
legendary_rob
legendary_rob

Reputation: 13012

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

Upvotes: 0

Views: 146

Answers (2)

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

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

Upvotes: 1

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

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

Upvotes: 2

Related Questions