gpt4 book ai didi

css - webkit-transition,使用宽度:auto时异常

转载 作者:技术小花猫 更新时间:2023-10-29 10:39:48 25 4
gpt4 key购买 nike

我有一个标准的侧边栏导航 <ul><li><a></a></li></ul>使用溢出隐藏截断链接全文的模式。悬停 1s 后,我希望 anchor 宽度扩大,显示链接的全文。

我在 CSS 中完全可以使用此功能,但我遇到了异常情况:我在 :hover 上将 anchor 的宽度设置为自动。触发 1s 延迟后,anchor 的宽度吸附到 0,然后扩展到其全宽。

下面是我的 css,在这里你可以看到我当前的代码:http://eventfeedstl.com/day/07182011/

.day .sidebar{
width: 200px;
}
.day .sidebar ul {
list-style: none;
padding: 0;
margin:0;
position: absolute;
width: auto;
}
.day .sidebar ul li{
border-bottom: 1px solid #626666;
display: relative;
width: 200px;
}
.day .sidebar ul li:hover{
width: auto;
}
.day .sidebar ul li a{
font-weight: normal;
font-size: .8em;
color: #f2f2f2;
display: block;
width: auto;
padding: 4px 5px;
background: none;
width: 190px;
height: 10px;
overflow: hidden;
position: relative;
z-index: 10;
-webkit-transition: background 1.3s ease-out;
-moz-transition: background 1.3s ease-out;
transition: background-color 1.3s ease-out;
}

.day .sidebar ul li a:hover {
background: #797979;
-webkit-transition: background 0.15s;
-moz-transition: background 0.15s;
transition: background 0.15s;
text-decoration: none;
width: auto;
-webkit-transition-property:width;
-webkit-transition-delay:1s;
position: relative;
}

最佳答案

您正在覆盖背景和宽度之间的过渡,这可能会导致问题。有一种方法可以设置多个转换,但我很确定这种方法会导致问题。

但是

一般来说,转换到 auto 还行不通。在这些情况下,我喜欢使用 min-width 和 max-width 来近似效果。

关于css - webkit-transition,使用宽度:auto时异常,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6725378/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com