Ocultar / mostrar conteúdo via CSS:hover (ou JS em caso de necessidade)
Pergunta
Eu tenho o seguinte html:
<li>
<span class="one">Stuff here</span>
<span class="two">More stuff</span>
</li>
.one { display: block; }
.two { display: none; }
O que é o método mais fácil, de preferência, CSS, para ocultar one
e mostrar two
quando o mouse passa sobre o <li>
recipiente.
Se isso não puder ser feito via CSS e apenas Javascript, prefiro jQuery através de algo como live()
como o conteúdo é atualizado ao vivo e não deseja constantemente a religação manualmente.
EDITAR: Eu esqueci de mencionar que este tem para funcionar no IE6 :/
Solução
$('ul').delegate('li', 'mouseenter', function(){
$('.one').hide();
$('.two').show();
})
.delegate('li', 'mouseleave', function(){
$('.one').show();
$('.two').hide();
});
Outras dicas
Apenas CSS:
.one { display: block; }
.two { display: none; }
li:hover .one
{
display: none;
}
li:hover .two
{
display: block;
}
Completamente não testado, e você pode querer usar o Fadein () e o Fadeout (), ou usar classes melhores (ambos os vãos devem ter a mesma classe, mas ID diferente). Aqui está uma amostra de jQuery para fazer isso:
$(document).ready( function(){
$("li span")
.mouseOver( function(){ $(this).hide() )
.mouseOut( function(){ $(this).show() )
});
Dependendo dos navegadores que você deseja apoiar, isso pode ser alcançado por:
li .one { display: block; }
li:hover .one { display: none; }
li .two { display: none; }
li:hover .two { display: block; }
<li>
<span class="one">Stuff here</span>
<span class="two">More stuff</span>
</li>
js parte depois de
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
por último, a parte css
.one { display: block; }
.two { display: none; }
li:hover .one, li.sfhover .one { display:none;}
li:hover .two, li.sfhover .two { display:block;}
não testado, mas experimentá-lo