CODEWITHSUNDEEP
css
Yeongchan Jeon
Yeongchan Jeon

Reputation: 519

How should I selectively apply 'transition:' property in one style?

I have some <li> tags in an <ul>. On hover, <a> tags in <li> change their background; and I added transition property in li a style in CSS to give some sort of animation effect.

I also want to change their font size along the window width so I added some media query with @media all and .... The problem is that the transition delay is applied to font size changes.

Here are my codes.

HTML(paste any place in <body>):

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Sites</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Support</a></li>
</ul>

CSS:

li a{
    padding: .4em 1em;
    text-decoration: none;
    color: #000;
    transition: .4s;
}

li a:hover{
    background-color: #ddd;
}

//...

@media all and (min-width:1px){
    ul{font-size: .8em;}
}

@media all and (min-width:480px){
    ul{font-size: 1.2em;}
}

I tried in two ways:

1) writing transition: .4s in li a:hover{...}. In this case the font size changes immediately but transition does not work when cursor leaves the list element.

2) writing transition: 0 in ul {...} in media query. This makes no changes.

What do I have to do in this case?

Edited: I'm sorry but I cannot upload the full code because the codes are fragmented to all components in an Angular2 project. Hope these codes are enough.

Upvotes: 3

Views: 84

Answers (1)

Asons
Asons

Reputation: 87191

You need to specify which properties the transition should use

transition: background-color 1s;

Stack snippet

li a{
    padding: .4em 1em;
    text-decoration: none;
    color: #000;
    transition: background-color 1s;
}

li a:hover{
    background-color: #ddd;
}

@media all and (min-width:1px){
    ul{font-size: .8em;}
}

@media all and (min-width:480px){
    ul{font-size: 1.2em;}
}
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Sites</a></li>
    <li><a href="#">Events</a></li>
    <li><a href="#">Support</a></li>
</ul>

Upvotes: 1

Related Questions