Sync hover state with
and ?

Question

I am trying to make it so that so that a hover effect will apply for both a listed item tag and an anchor tag that it is nested in. Ideally I want it so that all the CSS is on one tag instead of split into two. I want the hover effect of the anchor tag to animate when the listed element tag is triggered. I'm assuming the solution would be to merge the styles into one but I don't know how to do it.

HTML:

<ul class="nav">
<li>
    <a href="#" class="blue">CONTACT</a>
</li>
<li>
    <a href="#" class="blue">ABOUT</a>
</li>
<li>
    <a href="#" class="blue">PORTFOLIO</a>
</li>
</ul>

CSS:

body{
    background: #000;
}
ul{
    list-style-type:none;
    display: inline-block;
}

.nav{
    float:right;
    list-style-type:none;
    overflow: hidden;   
}

.nav li{
    float:right;
    overflow: hidden;
    color: #00bff3;
    border: 1px solid #00bff3;
    padding: 8px;
    margin-left: 10px;
    text-align: center; 
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

.nav li:hover{
    background:#00bff3;
    color:#000000;
}

.blue{
    color: #00bff3;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

.blue:hover{
    color:#000000;
}

http://jsfiddle.net/2gbu5yrz/

A possible way, but one that I might consider "hacky:" what if you resized the link to fill the list item? Then clicking anywhere on the list item would also serve as your link. — apnorton, Dec 14 '14 at 05:37
That was what I was trying to figure out but I don't know how to do that — Robbie Fikes, Dec 14 '14 at 05:48
Possible duplicate of http://stackoverflow.com/q/3264370/1110928 — apnorton, Dec 14 '14 at 05:53

score 0 · Answer 1 · answered Dec 14 '14 at 05:50

0

Maybe this is what you are looking for: Replace .blue:hover with .nav li:hover .blue.

http://jsfiddle.net/p0ahhp5c/

answered Dec 14 '14 at 05:50

carloabelli

4,289
3
43
70

score 0 · Accepted Answer · answered Dec 14 '14 at 05:52

It's easy enough to move the relevant styles to the links themselves (really where they should be anyhow):

http://codepen.io/pageaffairs/pen/PwNeEO

.blue{
  color: #00bff3;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  display: block;
  text-align: center;   
  padding: 8px;
}

.blue:hover{
  color:#000000;
  background:#00bff3;
}

score 0 · Answer 3 · answered Dec 14 '14 at 05:55

0

The solution is to make your a use block display style:

.blue{
    display: block;
    color: #00bff3;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
}

answered Dec 14 '14 at 05:55

apnorton

2,430
1
19
34

score 0 · Answer 4 · answered Dec 14 '14 at 10:04

0

Try this

.nav:hover .blue:hover {
  /*your code here*/
  }

answered Dec 14 '14 at 10:04

Miha Šušteršič

9,742
25
92
163

Sync hover state with and ?

4 Answers4

Sync hover state with
and ?