ECSHOP 鼠标放到商品上面时 显示文字

2016-07-07 14:55 来源：www.chinab4c.com 作者：ecshop专家

一些电商站，当鼠标点在商品上面上，再文字信息。价位呀，产品名称呀，感觉这个效果很不错的。
因为要考虑到seo的因素，所以，千万不要用js来实现，抓不到产品名称，是非常得不尝试了。
所以用css来实现这个效果是最完美的选择，下面我把代码帖出来，大家可以看看。

/*今日特价和品牌*/
/*Figu:以下是CSS文件*/

#sales
{
width:672px;
height:243px;
background-color:#eef8ff;
}

#sales .goodBox .goodList
{
width:336px;
margin:0px;
float:left;
}
#sales .goodBox .goodList img
{
width:334px;
height:241px;
border:1px solid #eae9e9;
}

#sales .goodBox .goodList p{text-align:left; color:#3f3f3f;}
#sales .goodBox .goodList p a{position:relative;display:block;}
#sales .goodBox .goodList p a:hover{text-decoration:none}
#sales .goodBox .goodList p a span {display:none;cursor:hand;text-align:left;/*font:bold 12px/30px Verdana， Arial;*/font:bold;}
#sales .goodBox .goodList p a:hover span
{
width:334px;
height:70px;

margin-left:1px;
background:#000;
display:block;
position:absolute;
bottom:0;
left:0;
color:#fff;

opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}




<!--Figu: 以下是recommend_promotion.lbi文件-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- {if $promotion_goods} -->
<div id="sales" class="f_l clearfix">
<div class="clearfix goodBox">
<!--{foreach from=$promotion_goods item=goods name="promotion_foreach"}-->
{if $smarty.foreach.promotion_foreach.index <= 3}
<div class="goodList">

<p>
<a href="{$goods.url}" title="{$goods.name|escape:html}">
<img src="{$goods.thumb}" border="0" alt="{$goods.name|escape:html}"/>
<span>{$goods.short_name|escape:html}<br/>{$lang.promote_price}{$goods.promote_price}</span>
</a>
</p>

</div>
{/if}
<!--{/foreach}-->
</div>
</div>
<!-- {/if} -->


以上由聚划算分享

回答：
沙发 支持了

沙发 支持了