我为小部件区域中的链接做了一个简单的翻转（不确定如何做这部分，目前不重要）我正在为此制作的网站位于 www.avuedesigns.com/new 目前在左侧下方横幅内容框，我希望它是那个区域。
这就是我想出的 http://jsfiddle.net/paDmg/368/
所以我的问题是，这会在那个领域工作（执行明智），还是尝试不同的方式？
这也很容易使它成为wordpress的小部件以将其放在该区域中吗？我们的 php 人正在休假 2 周，并试图自己完成这个项目。我相信我能弄清楚，我只需要指出一个方法的方向。
再次这里是翻车：http: //jsfiddle.net/paDmg/368/
也复制粘贴在这里。
CSS
ul#hover-grid {
padding: 0;
list-style: none;
margin: 0px auto 0;
margin-top: 0;
width: 220px;
}
#hover-grid li {
float: left;
padding: 2;
margin: 0 1px 1px 1px;
}
#hover-grid .indiv-cell {
width: 65px;
height: 65px;
}
</p>
html
<ul id="hover-grid">
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/1.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/2.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/3.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data- replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/4.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/1.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
<li class="indiv-cell"><a href="#"><img data-replacementimg="http://avuedesigns.com/new/wp-content/uploads/2012/09/2.jpg" src="http://avuedesigns.com/new/wp-content/uploads/2012/09/6.jpg"></a></li>
</ul>
Javascript
$('#hover-grid .indiv-cell').hover(function() {
//set variables to current cell attributes
var cellHeader = $(this).attr('data-hoverheader');
var cellText = $(this).attr('data-hovertext');
var replacementImg = $(this).find('a img').attr('data-replacementimg');
var oringinalImg = $(this).find('a img').attr('src');
//save original image to data variable
$(this).data('origImg', oringinalImg);
//add remove classes
$('#hover-grid .indiv-cell').removeClass('newClass');
$(this).addClass('newClass', 1000);
$(this).find('a img').hide().attr('src', replacementImg).fadeIn(300);
$('.master-cell h1').hide().text(cellHeader).fadeIn(300);
$('.master-cell p').hide().text(cellText).fadeIn(300);
//return false;
}, function() {
$(this).find('a img').hide().attr('src', $(this).data('origImg')).fadeIn(10);
});