Question

我在<li>中有一些<ul>个标签。在悬停时，<a>中的<li>代码会更改其背景;我在CSS中以transition样式添加了li a属性，以提供某种动画效果。

我还想沿窗口宽度更改字体大小，因此我添加了一些@media all and ...的媒体查询。问题是转换延迟适用于字体大小更改。

这是我的代码。

HTML（粘贴<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;}
}

我试过两种方式：

1）在transition: .4s中写li a:hover{...}。在这种情况下，字体大小会立即更改，但当光标离开列表元素时，转换不起作用。

2）在transition: 0中在媒体查询中写ul {...}。这没有任何改变。

在这种情况下我该怎么做？

已编辑：对不起，我无法上传完整代码，因为代码已碎片化为Angular2项目中的所有组件。希望这些代码足够。

Answer 1

您需要指定转换应使用的属性

transition: background-color 1s;

Stack snippet

＆＃13;

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;}
}

＆＃13;

<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>

＆＃13;

我应该如何有选择地应用过渡：＆＃39;一种风格的财产？

1 个答案: