1

I realize that this may not be possible, so I am also open to modifying the code for the sake of functionality.

Here is my css and html:

* {
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box;
  font-family: 'Raleway Webfont';
}

body {
  margin: 0;
  padding: 0;
  height: 4000px;
  font-size: 16px;
  line-height: 1.5;
}

ul, li, h1, h2, p, a, .logo {
  font-family: 'Raleway Webfont';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: black;
  font-weight: 200;
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  width: 100%;
  padding-top: 0px;
  background: #e5e5e5;
  transition:.25s;
  z-index: 100; 
  border-bottom-style: solid;
  border-width: 1px;
  box-shadow: 0 0 15px 0 rgba(0,0,0,0.9);
}

.inner {
  width: 800px;
  position: relative;
  margin: 0 auto;
}

nav {
  overflow: hidden;
}

nav ul {
  float: right;
}

nav li {
  display: inline;
  float: left;
  list-style: none;
}

nav a {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  padding: 25px 15px;
  transition:.25s;
}

nav a:hover  {
      margin: -8px 0 0 0;
}

nav ul li:first-child a {  
  background:#b7b7b7 !important;
}
nav ul li:nth-child(2) a {  
  background:#a0a0a0 !important;
}
nav ul li:nth-child(3) a {  
  background:#898989 !important;
}
nav ul li:nth-child(4) a {  
  background:#727272 !important;
}
nav ul li:nth-child(5) a {  
  background:#5b5b5b !important;
}

nav ul li:first-child:hover header  {
  background: #b7b7b7;  
}
nav ul li:nth-child(2):hover header {
  background: #a0a0a0;
}
nav ul li:nth-child(3):hover header {
  background: #898989;
}
nav ul li:nth-child(4):hover header {
  background: #727272;
}
nav ul li:nth-child(5):hover header {
  background: #5b5b5b;
}

.logo {
  float: left;
  color: #000;
  font-size: 30px;
  font-weight: 300;
  text-decoration: none;
  line-height: 70px;
}

section .inner {
  padding-top: 125px;
}

p {
  padding-top: 25px;
  font-weight: 400;
}

h1 {
  text-align: center;
}
<header>
  <div class="inner">
    <div> 
      <a class="logo" href="Home.html">W </a>
    </div>
    <nav role='navigation'>
      <ul>
        <li><a href="me.html">ME</a></li>
        <li><a href="cv.html">CV</a></li>
        <li><a href="rd.html">RD</a></li>
        <li><a href="av.html">AV</a></li>
        <li><a href="rr.html">RR</a></li>
      </ul>
    </nav>  
  </div>
</header>
<section>
  <div class="inner">
    <h1>about me</h1>
    <p><span> A work in progress.</span>
    </p>
  </div>
</section>

I truly thought that I could get away with selecting a parent element by utilizing the :hover selector, but, obviously I was mistaken. I have already visited "Is there a CSS parent selector?", as well as most of the other queries referencing this issue. My specific need, however, still confuses me.

Essentially, is it possible to manipulate the background: of <header> utilizing the in-place -child arrangement, the :hover selector (what I want stylistically), and some method to extend that selector back up to the <header>? The :has() method seems to be a likely candidate, but I cannot figure out how to implement it here for the life of me. If any structure can/must be altered while maintaining the aesthetic, then I am certainly open to implementing it as well. Thank you in advance!

Community
  • 1
  • 1
zzz
  • 123
  • 1
  • 9
  • So... you want to change the background of `
    ` when what is hovered? The links in the navigation table? I don't see a way to do this with pure CSS, as (like you mentioned) there isn't a parent element selector, however, it's pretty easy to do with jQuery (unless I misinterpreted)... https://jsfiddle.net/ng5hwwdm/
     –  Apr 04 '16 at 21:53
  • Bottom line I think that is what OP is looking for. just use `$(this).closest('header').css....` so you don't change background of every header on the page – The Process Apr 04 '16 at 21:57
  • @itsgoingdown - good call - just looked at what was on the page, but if you're using multiple `
    ` elements (or potentially could use them), definitely use the `closest()` function. Here's the same fiddle updated with `closest()` - https://jsfiddle.net/5d1tvnwh/
     –  Apr 04 '16 at 21:59
  • @mark.hch you should make it an answer – The Process Apr 04 '16 at 22:00
  • 1
    @itsgoingdown - thanks, not sure why I subconsciously insist on half of my answers being comments... –  Apr 04 '16 at 22:02

1 Answers1

3

I don't know of a way using pure CSS, however if you want to change the <header> background based on which link in your navigation is hovered, you can use this in jQuery (be sure to run at load, or place at the end of your body just before </body>):

$('[role=navigation] a').hover(function(){
  $(this).closest('header').css('background-color', $(this).css('background-color'));
},function(){
  $(this).closest('header').css('background-color', '#e5e5e5');
});

https://jsfiddle.net/5d1tvnwh/

  • i knew my day for entering jQuery would come some day, i just didn't expect it to be so soon! many thanks for your guidance. this was exactly what was needed. – zzz Apr 05 '16 at 13:04