陌小雨总觉得xiu主题的焦点区域设置的那个大图太简单了，没有任何特效，这不突发奇想，准备给他加一个特效：当鼠标悬停在图片上时，一道光滑过。
1、在主题style.css下加入如下代码：
.large{
position: relative;
display: block;
/* overflow: hidden; */
box-shadow: 0 0 10px #FFF;
}
.light{
cursor:pointer;
position: absolute;
left: -300px;
top: 0;
width: 300px;
height: 266px;
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.5),rgba(255,255,255,0));
transform: skewx(-25deg);
-o-transform: skewx(-25deg);
-moz-transform: skewx(-25deg);
-webkit-transform: skewx(-25deg);
}
.large:hover .light{
left:300px;
-moz-transition:0.5s;
-o-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}
其中.large为该焦点图li的class属性
2、在主题文件functions.php中搜索 hui_posts_focus()，然后找到下面这行代码：
$html .= '<li class="large"><a'.hui_target_blank().' href="'._hui('focus_href').'"><img class="thumb" data-original="'._hui('focus_src').'"><h4>'._hui('focus_title').'</h4></a></li>';
在li标签结束符号前面加一个属性
<i class="light"></i>
修改后变为
$html .= '<li class="large"><a'.hui_target_blank().' href="'._hui('focus_href').'"><img class="thumb" data-original="'._hui('focus_src').'"><h4>'._hui('focus_title').'</h4></a><i class="light"></i></li>';
刷新首页就可以看到效果了。
