Zeigen Sie Text in MouseOver für das Bild in HTML an

130

Ich möchte Text anzeigen, wenn der Benutzer mit der Maus über das Bild fährt.

Wie kann ich das in HTML / JS machen?

html image jseth
quelle

Antworten:

240

Sie können titleAttribut verwenden.

<img src="smiley.gif"  title="Smiley face"/>

Sie können die Bildquelle nach Belieben ändern.

Und wie @Gray kommentierte:

Sie können das auch verwenden , titlewie auf andere Dinge <a ...Anker <p>, <div>, <input>etc. Siehe auch : diese

Farhad Jabiyev
quelle
3
Sie können das auch verwenden , titleauf andere Dinge wie <a ...Anker, <p>, <div>, <input>, etc .. Siehe auch : w3schools.com/tags/att_global_title.asp
Grau
16

Sie können den CSS-Hover-
Link zu jsfiddle hier verwenden: http://jsfiddle.net/ANKwQ/5/

HTML: 

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ'></a>
<div>text</div>
​

CSS:

div {
    display: none;
    border:1px solid #000;
    height:30px;
    width:290px;
    margin-left:10px;
}

a:hover + div {
    display: block;
}​
Eric Leschinski
quelle
4

Das können Sie auch so machen:

HTML:

<a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a>

In Javascript:

function somefunction()
{
  //Do somethisg.
}

Wenn Sie

Benutzer
quelle
3

Sie können den CSS-Hover in Kombination mit einem Bildhintergrund verwenden.

CSS

   .image
{
    background:url(images/back.png);
    height:100px;
    width:100px;
    display: block;
    float:left;
}

.image  a {
    display: none;
}

.image  a:hover {
    display: block;
}

HTML

<div class="image"><a href="#">Text you want on mouseover</a></div>
Matte
quelle