CODEWITHSUNDEEP
htmlcsscss-transitions
BenjaminRH
BenjaminRH

Reputation: 12182

How can I apply a css transition to an element when its parent is hovered?

I have the html:

<div class="social-section">
    <a href="#" class="glyphicons facebook"><i></i></a>
    <a href="#" class="glyphicons twitter"><i></i></a>
</div>

I'd like to have the icon fade to a different color when moused over, using a CSS3 transition. Unfortunately, I'm not sure how to make this work, if it's possible. My current attempt at the css is:

.social-section * i:before { /* Apply this to the i:before, when the a is hovered */
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.social-section a i:before {
    color: red;
}

.social-section a:hover i:before {
    color: black;
}

In case this is helpful, here's the relevant section of the Glyphicons font css code:

.glyphicons {
    display: inline-block;
    position: relative;
    padding: 0 0 5px 35px;
    *display: inline;
    *zoom: 1;
}
.glyphicons i:before {
    position: absolute;
    left: 0;
    top: 0;
    font: 20px/1em 'Glyphicons';
    font-style: normal;
    color: red;
}

Upvotes: 1

Views: 1350

Answers (2)

BenjaminRH
BenjaminRH

Reputation: 12182

The answer is that pseudo elements aren't capable of transitions on most versions of most browsers. This issue is so frustrating that Chris Coyier (of css-tricks.com) is keeping a page open on the current status.

As of time of writing, transitions on pseudo elements are supported by:

  • Firefox 4.0+
  • Chrome 26+
  • IE 10+

You can confirm this on your browser.

Upvotes: 0

d-_-b
d-_-b

Reputation: 23211

A pseudo-code, since I'm not sure how it should act based on your quesiton...

put the transition css code you have in the element you want to affect (i.e. not the parent)

#child {
   // transitions....
}

then do

 #parent:hover #child {
   // your changes
}

When the parent element is hovered, make changes to the child. The child's existing transition effects will be used for this, which I think is your goal.

Also, if you're going to be transitioning between icons, you'll need to change the position of the sprite-image, which I assume you're using, not changing the color style.

Upvotes: 2

Related Questions