我在标准< ul>< li>< a>< / a>< / li>< / ul>中有侧边栏导航使用溢出隐藏来截断链接的全文的模式.悬停1秒后,我希望锚点在宽度上展开,显示链接的全文.
我有这个功能在CSS中完全工作,但是我遇到了异常:
我将锚点的宽度设置为自动开:悬停.触发1秒延迟后,锚点的宽度将按照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; }