非常简单的解决方案我敢肯定,但不能为我的生活解决它!非常感谢任何帮助...
基本上我有四个'li',每个都有自己的'p'。使用 jQuery,我想用类“overlay”创建一个新的“div”,然后将每个“p”移动到相应的“div”中。
到目前为止,我已经设法创建了“div”,但最终将所有四个“p”标签复制到所有四个“div”中......
在http://jsfiddle.net/NhezT/4/上放了一个模型
我的 HTML:
<ul class="cat_ul">
<li class="cat_li music_production">
<div class="cat_bxs">
<a href="#"><img class="cat_img" src="#"></a>
</div>
<p class="legend">Music Production</p>
</li>
<li class="cat_li web_development">
<div class="cat_bxs">
<a href="<#"><img class="cat_img" src="#"></a>
</div>
<p class="legend">Web Development</p>
</li>
<li class="cat_li online_promotion">
<div class="cat_bxs">
<a href="#"><img class="cat_img" src="#"></a>
</div>
<p class="legend">Online Promotion</p>
</li>
<li class="cat_li tutor_mentor">
<div class="cat_bxs">
<a href="#"><img class="cat_img" src="#"></a>
</div>
<p class="legend">Tutor And Mentor</p>
</li>
</ul>
我的 CSS:
.cat_ul {
list-style: none;
width: 840px;
margin: 0;
padding: 0;
}
.cat_li {
cursor: pointer;
float: left;
margin: 0 10px;
}
.cat_bxs {
position: relative;
width: 170px;
height: 170px;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(rgba(255,255,255,0)), to(rgba(0,0,0,.15)));
background: -webkit-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
background: -moz-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
background: -ms-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
background: -o-radial-gradient(circle, rgba(255,255,255,0), rgba(0,0,0,.15));
background-repeat: no-repeat;
}
.cat_bxs a {
display: block;
}
.cat_bxs a img {
width: 50%;
height: 50%;
margin: 25% 25%;
}
.cat_li .overlay {
display: table;
position: absolute;
width: 150px;
height: 150px;
left: 0;
top: 0;
padding: 10px;
background: rgba(0,0,0,.5);
opacity: 0;
}
.cat_li.music_production .overlay {
background: rgba(216,182,24,.5);
}
.cat_li.web_development .overlay {
background: rgba(92,164,64,.5);
}
.cat_li.online_promotion .overlay {
background: rgba(166,66,66,.5);
}
.cat_li.tutor_mentor .overlay {
background: rgba(41,140,191,.5);
}
.cat_li .overlay p {
display: table-cell;
position: relative;
vertical-align: middle;
text-transform: uppercase;
font-size: 10px;
text-align: center;
line-height: 2em;
width: 100%;
height: 100%;
color: #333;
}
我的 JavaScript:
// Append Function (Broken)
$(document).ready(function () {
$('.cat_bxs').append('<div class="overlay"></div>');
$('.cat_li').each(function(){
$(this).children('.legend').appendTo('.overlay');
});
});
//Hover Fade
$(document).ready(function () {
$(".cat_bxs").hover(function () {
$("a", this).animate({
"opacity": "0.25"
}, 600, function () {
$(this).next(".overlay").animate({
"opacity": "1"
}, 500);
});
}, function () {
var self = this;
var inter = setInterval(function () {
if (!$(".overlay", self).is(':animated') && !$(".overlay", self).prev("a").is(':animated')) {
clearInterval(inter);
$(".overlay", self).animate({
"opacity": "0"
}, 500, function () {
$(this).prev("a").animate({
"opacity": "1"
}, 600);
});
}
}, 100);
});
});
非常感谢提前...