styling und image-title-Attribut mit css?

Möchte ich den Stil der text, den wir sehen, wenn wir den Mauszeiger über das Bild. Ich habe Folgendes versucht, aber es funktioniert nicht:

<body>
    <img src="img.jpg" title = "<span class='title'> title </span>
</body>

Mein Stil ist in head. Ich Frage mich, warum es gezeigt wird als nur-text-und-warum-Stil nicht funktioniert.

Keine Attribute, die angepasst werden können, nur die Elemente selbst.
Möglich, Duplikat der so ändern Sie den Stil des Title-Attributs innerhalb des anchor-tag?
Nicht ein dupe imo, da beide Fragen befassen sich mit unterschiedlichen Problemen. Egal, ob die technischen Lösungen, die zufällig die gleichen.

InformationsquelleAutor Peeyush Kushwaha | 2012-07-26

  1. 5

    Title-Attribute in IMG-tags kann HTML enthalten, so können Sie dies tun.

    ich habe gesehen, wie diese durchgeführt wird.
    Du bist zu Fragen für das Unmögliche.
    Nichts ist Unmöglich
    Ja, ich denke mit $100M konnte Sie bestechen alle browser-Hersteller zu machen, Sie arbeiten, wie SIE wollen. Ich denke, das würde machen dies möglich. In der realen hier-und-jetzt-Welt, es ist nicht.
    ich habe die Antwort gefunden. und die Antwort auf diese Frage selbst. aktivieren Sie es, wenn Sie es nicht glauben

    InformationsquelleAutor Diodeus - James MacFarlane

  2. 2

    Ist es nicht möglich, direkt in html, es wird in der Zukunft mit der html5 - figure und figcaption element, oder ist es möglich mit jquery !
    Sehen HtmlDoctor für mehr Informationen auf diese Elemente !

    InformationsquelleAutor XhkUnlimit

  3. 0

    Aus der HTML-spec (Hervorhebung von mir):

    Title-Attribut stellt Beratungs-Informationen für das element, wie würde für ein tooltip. Auf einen link, so könnte die überschrift oder einer Beschreibung der Ziel-Ressource; auf einem Bild ist, könnte es die Bild-Kredit oder eine Beschreibung des Bildes; auf einen Absatz, es könnte sein, eine Fußnote oder Kommentar auf den text, auf ein Zitat, es könnte sein, weitere Informationen über die Quelle; auf interaktive Inhalte, es könnte ein Etikett oder Anweisungen für die Verwendung des element; und so weiter. Der Wert ist text.

    Ergo, nur text, ist es erlaubt, die title Attribut. Für eine benutzerdefinierte HTML tooltip, müssen Sie verwenden eine benutzerdefinierte Lösung, wie das verstecken der Inhalte von Standard-und zeigt es auf :hover mit CSS oder JavaScript zu verwenden, um zu ziehen aus einer data-... Attribut.

    InformationsquelleAutor 0b10011

  4. 0

    Wenn das, was Sie tun möchten, ist die Anzeige eines Textes, wenn der Mauszeiger ein Bild, die Sie tun können, etwas mit CSS :hover Zustand.

    Solche Lösung ist beschrieben in in diesem blog-post.

    InformationsquelleAutor Yannick Blondeau

  5. 0

    Anderen große Geige ist http://jsfiddle.net/tDQWN/129/
    (Kann ich nicht nehmen Kredit, aber in der Suche fand ich beide Beiträge). Es ist eine ähnliche Lösung, aber das styling ist ein bisschen schicker.

    a {
  color: #900;
  text-decoration: none;
}

a:hover {
  color: red;
  position: relative;
}

a[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

    Und HTML:

    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. <a href="#" data-title="Hello, i am a link">Vestibulum</a> tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="#" data-title="This is another link">Mauris placerat</a> eleifend leo.</p>

    Hoffe, das jemand hilft!

    InformationsquelleAutor ter24

Schreibe einen Kommentar