绝对位置如何在相对 div (html/css) 内改变
我不知道如何表达这个问题,但我会尝试通过代码来解释
<ul>
<li><span>1</span><li>
<li><span>2</span><li>
<li><span>3</span><li>
<li><span>4</span><li>
</ul>
ul{ width:90px}
ul li{width:30px; float:left; position:relative;}
ul li:hover span{ position:absolute; width:60px;}
现在,当您将鼠标悬停在列表一上时,其跨度将覆盖列表 2,列表 2 将覆盖列表 3。一旦您将鼠标悬停在第三个列表,它的跨度将跨越 ul 元素。那么有没有办法让第三个跨度从右向左扩展呢?因此,目前跨度的起点(据我所知)是列表的左上角。有没有办法让它从右边开始。那么额外的 30px 向左扩展,而不是向右?
I didn't know how else to phrase the question, but I'll try to explain through code
<ul>
<li><span>1</span><li>
<li><span>2</span><li>
<li><span>3</span><li>
<li><span>4</span><li>
</ul>
ul{ width:90px}
ul li{width:30px; float:left; position:relative;}
ul li:hover span{ position:absolute; width:60px;}
Now, when you hover on list one, its span would cover list 2, and list 2 would cover list 3. Once you hover over the third list, its span would run over the ul element. So is there a way to make the third span expand from right to left? So at the moment the spans starting point (as I understand it) is the top-left corner of the list. Is there a way to make it start from right. So the extra 30px expand to the left, not to the right?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
首先,你错误地关闭了 LI 标签。我执行了与你相同的代码。但是当我悬停在任何跨度上时,没有任何反应,并且它是正常且正确的。我认为你的意思是像 jquery Accordian 插件或类似的东西。也许你可以做在本期中使用 jquery 而不是 css。如果您需要其代码,请评论我。祝您好运
first,you closed the LI tag incorrectly.I execute the same code as yours.but when i hovered any span nothing happened and it is regular and correct.i think you mean something like jquery accordian plugin or something lick that.maybe you can do that with jquery instead of css in this issue.If you need its code comment me.good luck