如何在悬停时更改文本大小,而不推动周围环境(html/css - 无 JavaScript)

发布于 2024-11-10 08:57:49 字数 880 浏览 1 评论 0原文

示例: 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技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

萌酱 2024-11-17 08:57:49

您可以使用溢出隐藏、空白:nowrap,并将每个 li 元素放在不同的行上。有关示例,请参阅

You could use overflow hidden, whitespace: nowrap, and have each li element on different lines. See this for an example.

过度放纵 2024-11-17 08:57:49

这在某种程度上是可能的。但它有一定程度的 hack 性(并且相对脆弱,因为浏览器实现了 :after 伪元素),并且还需要向 添加 title 属性li 元素,创建此标记:

<ul>
    <li title="picnic">picnic</li>
    <li title="webprogramming">webprogramming</li>
    <li title="scripting">scripting</li>
    <li title="stylesheet">stylesheet</li>
    <li title="jsfiddle">jsfiddle</li>
    <li title="stackoverflow">stackoverflow</li>
    <li title="moonwalker">moonwalker</li>
    <li title="powertools">powertools</li>
    <li title="mastermind">mastermind</li>
    <li title="chicken">chicken</li>
</ul>

和以下 CSS:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100px;
    width: 100px;
}
li {
    display: inline-block;
    position: relative;
    font-size: 10px;
}
li:hover:after {
    color: #f00;
    font-weight: bold;
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    background-color: #fff;
    border: 1px solid #f90;
}

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 a title attribute to the li elements, to create this mark-up:

<ul>
    <li title="picnic">picnic</li>
    <li title="webprogramming">webprogramming</li>
    <li title="scripting">scripting</li>
    <li title="stylesheet">stylesheet</li>
    <li title="jsfiddle">jsfiddle</li>
    <li title="stackoverflow">stackoverflow</li>
    <li title="moonwalker">moonwalker</li>
    <li title="powertools">powertools</li>
    <li title="mastermind">mastermind</li>
    <li title="chicken">chicken</li>
</ul>

and the following CSS:

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: 100px;
    width: 100px;
}
li {
    display: inline-block;
    position: relative;
    font-size: 10px;
}
li:hover:after {
    color: #f00;
    font-weight: bold;
    content: attr(title);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
    background-color: #fff;
    border: 1px solid #f90;
}

JS Fiddle demo.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文