Wie um die Textgröße zu verändern, die auf Maus ohne drücken der Umgebung (html - /css - kein javascript)

Beispiel: http://jsfiddle.net/rXf4U/5/

Glaube ich nicht erklären kann ich es besser als es gemacht wird, in der Titel, aber das Beispiel sollte ziemlich selbsterklärend.

Habe ich eine finite-etwa der Raum gefüllt mit tags, Wörter oder was auch immer. Um Platz zu machen für mehr, ich senkte die text-Größe, aber die wollen dann tatsächlich gelesen werden, wenn Sie schweben. Es ist leicht zu sehen, aus dem Beispiel, worin das problem liegt.

Habe ich versucht, gerade über alles, einschließlich eine Menge der Suche. Ich habe versucht, auf der z-Ebenen. Ich hatte nicht erwartet, dass es funktioniert und das wollte es natürlich nicht. Ich habe auch versucht verschiedene näherte sich mit Positionierung, und während ich gelungen, bis zu einem gewissen Grad, es ist wirklich eine Sauerei.

Beispiel: http://jsfiddle.net/rXf4U/17/

Als diese ist kein neues Konzept, ich bin mir sicher, dass es nur werden, wer nicht in der Lage herauszufinden, der richtige Suchbegriff, aber genau das gleiche, ich bin stecken 😉

Ich hoffe, Sie werden mich führen, in die richtige Richtung.

Beste Grüße.

Wichtiger edit:
Natürlich ist der li-tag enthalten 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>

Ich hoffe, dies macht es mehr "möglich" zu machen ohne JavaScript.

Sorry für die Schraube.

Die einzige Möglichkeit die ich denken kann, dies zu tun, effektiv zu nutzen Sie javascript =[ Ist das eine option?
Nein, ich absolut hasse JavaScript und nicht angeführt. Jedoch habe ich vergessen einen wichtigen Punkt, das könnte einen Unterschied machen. Natürlich ist die li ' s links oder <a>'s. Denke, das ist ziemlich wichtig. Big bummer für meinen Teil.

InformationsquelleAutor Zacariaz | 2011-05-26

  1. 2

    Könnten Sie overflow hidden, whitespace: nowrap, und jedes li-element auf verschiedenen Linien. Sehen diese für ein Beispiel.

    Sie lösen nicht das problem in seiner Gesamtheit, als der text noch verschoben werden. Auch er würde von mir verlangen, zu splitten, die Dinge zu Spalten. Denke mal, dass tatsächlich würde die Dinge schöner werden. Danke für die Antwort-
    Herzlich willkommen, hoffe, das funktioniert für Sie, oder mindestens Sie näher an eine Lösung. Auch, nur eine Randnotiz: immer wenn ich mit overflow hidden, ich in der Regel sollten Sie erwägen, einen Titel mit dem gleichen text angezeigt wird, ist der Hauptgrund, finde ich es ein bisschen nervig, wenn text wird geschnitten und man kann es nicht Lesen. Mai oder Mai nicht in Ihrem Fall anwendbar, aber nur so ein Gedanke 🙂

    InformationsquelleAutor Briguy37

  2. 1

    Dies ist, sozusagen, möglich. Aber es ist mäßig hack-ish (und relativ zerbrechlich, da browser-Implementierungen des :after pseudo-element), der auch mit Ihnen das hinzufügen eines title Attribut der li Elemente, um diese Marke-bis:

    <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>

    und die folgenden 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.

    Wow, das ist eine Lösung. Es gibt einen Haken, wenn. Ich muss sicher sein, es wird für neuere browser, nicht einschließlich IE8 für jetzt, und es müssen in Zukunft funktionieren, Browser zu. Ich werde weiter zu untersuchen, in Bezug auf diesen Ansatz. Für jetzt, für die nette Antwort.
    Vielleicht sollte ich beachten Sie, dass die li ' s schließlich enthalten eine <a> tag. Nehme an, das ist eigentlich ziemlich wichtig 😀
    Ich bin mir nicht sicher, wirklich. Es könnte sein, können Sie zeigen Sie Ihre beabsichtigte mark-up? Diese Lösung funktioniert in css3-kompatiblen Browsern und, wahrscheinlich, kompatibel für einige Zeit (in der gleichen Weise, wie Firefox 4/Chromium 11 unterstützt derzeit die frühesten Inkarnationen von CSS). Das einzige problem, wirklich, ist wahrscheinlich der IE-Familie.
    gut, es scheint zu funktionieren in IE9 und ich habe noch zu entscheiden, ob ich unterstützen möchten ie8. Wenn jemand überprüfen, wie es funktioniert, das wäre toll, sonst werde ich wieder, wenn ich mehr wissen. Nochmals vielen Dank.
    kein problem; gerne helfen 🙂

    InformationsquelleAutor David Thomas

Schreibe einen Kommentar