Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Deregudegu

Fazer aparecer div com hover

Por , em Desenvolvimento frontend

Recommended Posts

Deregudegu    1

Deregudegu
Postado

Olá, eu tenho um servidor de um jogo online e estou desenvolvendo um ranking.

Estou tentando encontrar um script que quando eu passe o mouse em cima de uma linha da tabela do ranking, automaticamente aparecerá uma div do lado esquerdo com alguns dados, já procurei um monte na internet, mas não achei algo que eu possa usar infinitamente, pois o número de personagens do jogo é dinâmico.

Se alguém tiver alguma dica, por favor me informe.

Caso eu tenha postado no local errado, me informe também.

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vanilson    2

Vanilson
Postado

Deregudegu, já tentou dar uma olhada no jquery?

Se ainda não podes resolver isso facilmente com os métodos toggle(), hide() e show() do jquery.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Deregudegu    1

Deregudegu
Postado

Eu tentei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
     body {
       margin: 0;
       padding: 0;
       font-family: Arial, Helvetica, sans-serif;
     }

     /* HOVER STYLES */
     #pop-up {
       display: none;
       position: absolute;
       padding: 5px;
       background: #eeeeee;
       border: 1px solid #1a1a1a;
     }
   </style>
   <script type="text/javascript">
  function ExibirDiv(theLink){
       var Id = theLink.id;
	$('div#pop-up').show();
  }
  function MoverDiv(theLink){
	var moveLeft = 20;
       var moveDown = 10;
       var Id = theLink.id;
	$("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
  }
  function EsconderDiv(theLink){
       var Id = theLink.id;
	$('div#pop-up').hide();
  }
   </script>
</head>

<body>
<table width="900" border="0" align="center">
 <tr id="Dere" onmouseover="javascript:ExibirDiv(this)" onmousemove="javascript:MoverDiv(this)" onmouseout="javascript:EsconderDiv(this)">
   <td>Dere</td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
 <tr>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
 <tr>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
 <tr>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
 <tr>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
   <td> </td>
 </tr>
</table>
<div id="pop-up" class="pop-up" style="display: none;">
       <img src="http://localhost/painelbrasilms/char/?personagem=dere" />
   </div> 
</body>
</html>

Mesmo assim, não consegui fazer :S

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito