span dentro de ul li

[ericolvr 0]

Pessoal, iso geralmente é muito fácil, 20 horas sem dormir atordoa.

 

<ul class="ultimos-add">
{% for portfolio in portfolios %}
   <li>
<a href="#">
    <img src="{{ portfolio.imagem_url }}" alt="{{ portfolio.nome }}" width="220" height="220" />
    <span></span>
</a>
   </li>
{% endfor %}

 

ul.ultimos-add{ list-style:none; width: 960px; margin: 0; padding: 0; }
   ul.ultimos-add li{
       float: left;
       display: inline;
       width: 230px;
       height: 230px;
       background: #C6C6C6;
       border-radius: 3px;
           -moz-border-radius: 3px;
           margin: 5px 5px 10px 5px;
           padding: 0;
   }

   ul.ultimos-add li a  img {
       margin: 5px 0 0 5px;
       width: 220px;
       height: 220px;

   }


   ul.ultimos-add li a img span{ display: none; }
ul.ultimos-add a img span:hover { 
	display: block;
	width: 220px;
	height: 220px; 
	left: 0px;
	top: 0px;
	position: absolute;
	background: url(../img/hover_port.png) top left no-repeat;
}

 

a idéia é fazer um hover no span para mostrar uma imagem

[Marcos Xavier 189]

Onde está:

ul.ultimos-add  li a span:hover { 

 

Substitua por:

ul.ultimos-add  li a span:hover { 

 

Acho que nã funfa nos IE<9

[Samuel Volpato 4]

ul.ultimos-add li a img span{ 
   display: none; 
}

ul.ultimos-add a img span:hover { 
   display: block;
   width: 220px;
   height: 220px; 
   left: 0px;
   top: 0px;
   position: absolute;
   background: url(../img/hover_port.png) top left no-repeat;
}

 

Teoricamente tu está está escondendo a span (com o dsiplay: none), então ela não deve responder ao hover...

 

inverte as duas propriedades para:

ul.ultimos-add a span:hover img

 

não esquece de colcoar a img dentro da span...