130 Gostaria de exibir texto quando o usuário passa o mouse sobre a imagem. Como posso fazer isso em HTML / JS? html image jseth fonte
241 Você pode usar o titleatributo <img src="smiley.gif" title="Smiley face"/> Você pode alterar a fonte da imagem como desejar. E como o @Gray comentou: Você também pode usar o titleem outras coisas como <a ...âncoras, <p>, <div>, <input>, etc. Veja: este Farhad Jabiyev fonte 3 Você também pode usar o titleem outras coisas como <a ...âncoras, <p>, <div>, <input>, etc .. Veja: w3schools.com/tags/att_global_title.asp Grey 16 Você pode usar o CSS hover Link para jsfiddle aqui: 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 fonte 4 Você pode fazer assim também: HTML: <a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a> Em javascript: function somefunction() { //Do somethisg. } O que outras pessoas estão dizendo do utilizador fonte 3 Você pode usar o cursor do CSS em combinação com o fundo da imagem. 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> esteira fonte
16 Você pode usar o CSS hover Link para jsfiddle aqui: 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 fonte
4 Você pode fazer assim também: HTML: <a><img src='https://encrypted-tbn2.google.com/images?q=tbn:ANd9GcQB3a3aouZcIPEF0di4r9uK4c0r9FlFnCasg_P8ISk8tZytippZRQ' onmouseover="somefunction();"></a> Em javascript: function somefunction() { //Do somethisg. } O que outras pessoas estão dizendo do utilizador fonte
3 Você pode usar o cursor do CSS em combinação com o fundo da imagem. 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> esteira fonte
title
em outras coisas como<a ...
âncoras,<p>
,<div>
,<input>
, etc .. Veja: w3schools.com/tags/att_global_title.aspVocê pode usar o CSS hover
Link para jsfiddle aqui: http://jsfiddle.net/ANKwQ/5/
HTML:
CSS:
fonte
Você pode fazer assim também:
HTML:
Em javascript:
O que outras pessoas estão dizendo
fonte
Você pode usar o cursor do CSS em combinação com o fundo da imagem.
CSS
HTML
fonte