active/ hover state has color above link

[Kevin]

I like the way this nav works. I looked at code inspector but I cannot figure out how the color is added on hover/ active states (as a background) but doesn't interfere with the link text. Any ideas how this is done?

[David Chu]

Hi,
That was a really tricky little CSS brainteaser. I had to look very closely. I can tell you the basic concept, but you'd still be in for some work to put it in your context. If you're a CSS geek, you could pull it off. Here's what happens... you hover over the link, so far so good, but there's no obvious hover link code that makes the yellow gunk show up! BUT...inside each link is a <b> tag, which is not used semantically, but instead is used to display itself absolutely positioned way above the link with its yellow gunk. In the following code, the hover is set to make it show up (the opacity part).

.sf-menu > li > a:hover b, .sf-menu > li.sfHover > a b, .sf-menu > li.current-menu-item > a b {
outline: 0;
opacity: 1;
}

Then in turn, this stuff is visible (because it's now opaque).

.sf-menu > li > a b {
position: absolute;
left: 0;
right: 0;
top: -82px;
height: 61px;
background: #FC0;
display: block;
opacity: 0;
transition: all 400ms linear;
-o-transition: all 400ms linear;
-moz-transition: all 400ms linear;
-webkit-transition: all 400ms linear;
}

Just crazy. It's very fancy and incredibly cute, but pretty precious to code, and I don't really care for code that's this complicated. It also won't work if someone is viewing this with out-of-date IE.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Kevin]

Thanks for looking into this and providing the code Dave,
I'll try it and see how it looks.

[David Chu]

You're welcome, Kevin.

And as I think about it, you could probably "junk-IE-proof" this by using some flavor of "display" or "visibility" instead of hipster "opacity", especially when changing opacity from zero to one doesn't even take advantage of, well, opacity. 😉

Good luck,
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Kevin]

🙂 Good point. Thanks

[Author]

Posts