Hover Jquery

[Alvaro Jr 2]

Bom to um tempo ja tomando uma surro pra botar um hover simples

 

eo seguinte meu

html ta assim

<ul id="MenuPrincipal">
<li class="Sobre"><a href="#vemaqui" title="Sobre">Sobre</a></li>
<li class="Trabalhos"><a href="#porto" title="Trabalhos">Portifolio</a></li>
<li class="Contato"><a href="#Contato" title="Contato">Contato</a></li>
</ul>

 

Meu Css ta assim

.Sobre{
background-image:url(../bnt1.png);
background-repeat:no-repeat;
width:100px;
height:90px;
}
.Trabalhos{
background-image:url(../BNT2.png);
background-repeat:no-repeat;
width:100px;
height:90px;}
.Contato{
background-image:url(../BNT3.png);
background-repeat:no-repeat;
width:100px;
height:90px;}

.Sobre:hover{
background-image:url(../bnt1-houver.png);
background-repeat:no-repeat;
width:100px;
height:90px;}

.Trabalhos:hover{
background-image:url(../BNT2-houver.png);
background-repeat:no-repeat;
width:100px;
height:90px;}
.Contato:hover{
background-image:url(../BNT3-houver.png);
background-repeat:no-repeat;
width:100px;
height:90px;}

 

 

Da pra repara que meu Hover ta funcionando eu fiz ele normal pelo Css

so que eu queria que ele troca-se com efeito fade-in

 

.sobre{} fade-in sobre:hover{}

 

$_$

[Dian Carlos 29]

você pode usar o transition do CSS3.

 

.Sobre{
background-image:url(../bnt1.png);
background-repeat:no-repeat;
width:100px;
height:90px;
       -webkit-transition: all 0.5s ease; /*Para Google Chrome - 0.5S é o tempo da transição*/
-moz-transition: all 0.5s ease; /*Para Mozilla*/
-o-transition: all 0.5s ease; /*Para Opera*/
-ms-transition: all 0.5s ease; /*Para IE 9+*/
}

 

NOTA: o CSS3 só funciona em navegadores atuais, não funciona no velho ultrapassado Internet Explorer 8 -.

[Alvaro Jr 2]

Siim

so que eu queria um codigo jquery para troca

 

 .sobre Para .sobre:hover no fade-in

[Alvaro Jr 2]

Conseguir usa hover jquery so que eu to com problema doido agora

tipo esse eo script

 

<script type="text/javascript">
$(document).ready(function() {
	$('.Sobre, .Trabalhos, .Contato').append('<span class="hover"></span>').each(function () {
  		var $span = $('> span.hover', this).css('opacity', 0);
  		$(this).hover(function () {
    		$span.stop().fadeTo(500, 1);
 		}, function () {
   	$span.stop().fadeTo(500, 0);
  		});
	});
});
</script>

 

ESSEO EO HTML

 

<ul id="MenuPrincipal">

<li class="Sobre" id="Sobre"><a href="#vemaqui" title="Sobre">Sobre</a></li>
<li class="Trabalhos" id="trampo"><a href="#porto" title="Trabalhos">Portifolio</a></li>
<li class="Contato" id="Contato"><a href="#Contato" title="Contato">Contato</a></li>

</ul>

 

E AQUI QUE EU SUPONHO QUE ESTA ERRO JUNTO COM HTML

#Sobre {
clear: both;
position:relative;
display:block;
height: 90px;
width: 95px;
background:url(../bnt1.png) no-repeat;
background-position:0 0;
cursor: pointer;
}
#Sobre span.hover {
position:absolute;
top:-10px;
left:2px;
display: block;
height: 100px;
width: 95px;
background:url(../bnt1-houver.png) no-repeat;
background-position: bottom;
}

#trampo {
clear: both;
position:relative;
display:block;
height: 90px;
width: 95px;
background:url(../bnt2.png) no-repeat;
background-position:0 0;
cursor: pointer;
}

#trampo span.hover {
position:absolute;
top:-10px;
left:2px;
display: block;
height: 100px;
width: 95px;
background:url(../bnt2-houver.png) no-repeat;
background-position: bottom;
}

#Contato{
clear: both;
position:relative;
display:block;
height: 90px;
width: 95px;
background:url(../bnt3.png) no-repeat;
background-position:0 0;
cursor: pointer;
}

#Contato span.hover {
position:absolute;
top:-10px;
left:2px;
display: block;
height: 100px;
width: 95px;
background:url(../bnt3-houver.png) no-repeat;
background-position: bottom;
}

 

 

O houver ta funcionando perfeitamento so que quando da houver

a class .span.houver vai pra frente e ela nao da link

entao eu teria que por uma link nela #div. tipo

ai se eu tira essa class span.houve o link funciona

 

so pra registra as div que fica por cima ea

Span.Hover teria que da link nela

tenque ser pelo scripts ou pelo css ?