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

Por , em Desenvolvimento frontend

Recommended Posts

dogsim    0

dogsim
Postado

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

Guilherme_90    33

Guilherme_90
Postado

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

Bruno Augusto    417

Bruno Augusto
Postado

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

Valdeir Info    2

Valdeir Info
Postado

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

dogsim    0

dogsim
Postado

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

Valdeir Info    2

Valdeir Info
Postado

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
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