Ir para conteúdo

POWERED BY:

Arquivado

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

dogsim

Efeito hover em código css

Recommended Posts

Em vez de criar uma imagem e colocar o efeito onMouseOver,onMouseOut no meu HTML eu criei essas imagens em CSS, mais eu preciso que quando passar o mouse sobre a tabela apareça o outro código.

Aqui esta o código

 

HTML

 

<!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>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
</head>
<body>
<table width="200" border="1">
 <tr>
   <td><div id="retangulo">
	<div id="numero">1</div>
	<div id="palavra">teste</div>
	</div></td>
   <td><div id="retangulo1">
	<div id="numero1">1</div>
	<div id="palavra1">teste de código</div>
       <div id="rotacao">Rotação</div>
       </div></td>
 </tr>
</table>
</body>
</html>

 

CSS

 

#retangulo{
width: 150px;
height: 215px;
border:solid; border-color: #666666;
-moz-border-radius:10px; 
-webkit-border-radius:10px;;	
}
#numero{
width: 35px;
height: 65px;	
font-family:Arial, Helvetica, sans-serif; font-size:50px;color: #FF9900;
}
#palavra{
margin-top:12px;
margin-left:20px;
width: 130px;
height: 30px;
font-family:Verdana, Geneva, sans-serif; font-size:19px;color: #FF9900;
}

#retangulo1{
width: 150px;
height: 275px;
border:solid; border-color: #666666;
-moz-border-radius:10px; 
-webkit-border-radius:10px;;
background-color:#FF2200;	
}
#numero1{
margin-top:15px;
width: 35px;
height: 65px;	
font-family:Arial, Helvetica, sans-serif; font-size:50px;color: #000;
}
#palavra1{
margin-top:125px;
margin-left:12px;
width: 137px;
height: 40px;
font-family:Verdana, Geneva, sans-serif; font-size:15px;color: #000;
}

#rotacao {
font-family:Arial, Helvetica, sans-serif; font-size:19px; color: #000;
margin-left:-20px;
margin-top:-180px;
width: 126px;
height: 30px;
-webkit-transform: rotate(-90deg);/* Safari */
-o-transform: rotate(-90deg);/* Opera */
-moz-transform: rotate(-90deg);/* Firefox */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);/* Internet Explorer */
}

 

Eu quero passar o mouse sobre qualquer parte do retangulo da primeira tabela e a imagem da segunda tabela aparecer no lugar da primeira.

OBS: no código esta separado por tabela apenas para visualização, no caso os dois estarão na mesma tabela.

 

no caso usaria o comando :hover certo, mais não consigo aplicar em todo o objeto.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Quando o mouse passar em cima da div "triangulo1", quer que apareça o código da div "triangulo"?

Compartilhar este post


Link para o post
Compartilhar em outros sites

A idéia é, no básico do báscio, a seguinte:

 

#elemento {
   background-image: url( 'out.png' );
}

#elemento:hover {
   background-image: url( 'over.png' );
}

Veja se consegue algo sozinho com isso.

Compartilhar este post


Link para o post
Compartilhar em outros sites

para fazer isso em CSS a div retangulo1 teria que está dentro da div retangulo; mais você fazer usando jQuery.

 

JS

$("#retangulo").hover (function () {
    $(this).hide("slow");
    $("#retangulo1").show("slow");
});

 

CSS

#retangulo{
       width: 150px;
       height: 215px;
       border:solid; border-color: #666666;
       -moz-border-radius:10px; 
       -webkit-border-radius:10px;
       position:relative;
       top:0;
       left:0;
}

#retangulo1{
       width: 150px;
       height: 275px;
       border:solid; border-color: #666666;
       -moz-border-radius:10px; 
       -webkit-border-radius:10px;;
       background-color:#FF2200;
       position:relative;
       top:0;
       left:0;
}

 

 

Acho que é isso!

Compartilhar este post


Link para o post
Compartilhar em outros sites

queria algo assim:

 

essa é a imagem criada em css

http://imageshack.us/photo/my-images/190/57485470.png/

 

e quando passo o mouse sobre ela aparece essa imagem tambem criada em css

http://imageshack.us/photo/my-images/259/53776270.png/

ou seja, essas duas imagens, são na verdade códigos em css, mais não consigo passar o mouse sobre uma div e chamar outra, porque tem mais 2 elementos pra chamar junto que é o numero e palavra, e uma nova que é rotação

 

A idéia é, no básico do báscio, a seguinte:

 

#elemento {
   background-image: url( 'out.png' );
}

#elemento:hover {
   background-image: url( 'over.png' );
}

Veja se consegue algo sozinho com isso.

 

em vez de chamar uma imagem quero chamar outras DIVs quando passa o mouse sobre

 

Quando o mouse passar em cima da div "triangulo1", quer que apareça o código da div "triangulo"?

 

mais ou menos isso mais tem as outras DIVs pra chamar junto.

Compartilhar este post


Link para o post
Compartilhar em outros sites

dogsim, pra fazer isso as duas imagens tem que está na mesma tag (div, p, span, td...), se as mesmas estiverem na mesma tag basta fazer isso:

 

<div id="um"><img src="01.jpg" />     <div id="dois">          <img src="02.jpg" />     </div></div>

 

css

div#dois {display:none;}div#um:hover #dois {     display:block;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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