如何在悬停时更改文本大小,而不推动周围环境(html/css - 无 JavaScript)
示例: http://jsfiddle.net/rXf4U/5/
我认为我无法解释它比标题中所做的更好,但是这个例子应该是不言自明的。
我的空间有限,里面充满了标签、文字或其他东西。为了腾出更多空间,我降低了文本大小,但希望在悬停时真正可读。从例子中很容易看出问题所在。
我已经尝试了几乎所有方法,包括大量搜索。我尝试过使用 z 层。我没想到它会起作用,当然它没有起作用。我也尝试过各种涉及定位的方法,虽然我在某种程度上取得了成功,但确实是一团糟。
示例: http://jsfiddle.net/rXf4U/17/
因为这不是一个新概念,我确信这只是那些无法找出正确搜索词的人,但同样,我被困住了;)
我确实希望你能引导我走向正确的方向。
此致。
重要编辑: 当然,li 标签将包含链接:
<ul>
<li><a href="#">keyword</a></li>
<li><a href="#">keyword</a></li>
<li><a href="#">keyword</a></li>
<li><a href="#">keyword</a></li>
...
</ul>
我确实希望这使得无需 JavaScript 就变得更加“可能”。
抱歉搞砸了。
Example: http://jsfiddle.net/rXf4U/5/
I don't think I can explain it any better than it's done in the title, but the example should be pretty self explanatory.
I have a finite about of space filled with tags, words or whatever. In order to make room for more, I've lowered the text-size, but want then to actually be readable when hovering. It is easy to see from the example wherein the problem lies.
I've tried just about everything, including a lot of searching. I've tried to use z-layers. I didn't expect it to work and of course it didn't. I've also tried various approached involving positioning, and while I have succeeded to some degree, it really is a mess.
Example: http://jsfiddle.net/rXf4U/17/
As this is not a new concept, I'm sure it's just be who are unable figure out the correct search term, but just the same, I'm stuck ;)
I do hope you'll guide me in the right direction.
Best regards.
Important edit:
Of course the li tag will contain link:
<ul>
<li><a href="#">keyword</a></li>
<li><a href="#">keyword</a></li>
<li><a href="#">keyword</a></li>
<li><a href="#">keyword</a></li>
...
</ul>
I do hope this makes it more "possible" to do without JavaScript.
Sorry for the screw up.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
您可以使用溢出隐藏、空白:nowrap,并将每个 li 元素放在不同的行上。有关示例,请参阅此。
You could use overflow hidden, whitespace: nowrap, and have each li element on different lines. See this for an example.
这在某种程度上是可能的。但它有一定程度的 hack 性(并且相对脆弱,因为浏览器实现了
:after
伪元素),并且还需要向添加
元素,创建此标记:title
属性li和以下 CSS:
JS Fiddle demo。
This is, sort of, possible. But it's moderately hack-ish (and relatively fragile, given browser implementations of the
:after
pseudo-element), and also involves you adding atitle
attribute to theli
elements, to create this mark-up:and the following CSS:
JS Fiddle demo.