<分区>
<分区>
我在列表项中有一个 div，显示设置为无。我希望它在该列表项悬停时淡入。我已经花了大约一个小时尝试各种教程，但我就是无法让它工作......
<li data-tags="Websites" class="boxgrid captionfull">
<img src="resources/Portfolio/Thumbs/ChugBeersWebsite.jpg" width="200" />
<div class="boxcaption">
<h3>Chug Beers Site</h3>
<p><a href="http://www.chugbeers.com">Visit Site</a></p>
</div>
</li>
<script type="text/javascript">
$(document).ready(function() {
$(function(){
$('.captionfull').hover(function(){
$(".boxcaption").fadeIn('slow');
}, function() {
$(".boxcaption").fadeOut('slow');
});
})
});
</script>
我相信以下脚本在某种程度上与它冲突。我正在使用可过滤的投资组合插件，但我对 jquery 的了解还不够多，所以不想搞砸它。任何帮助将不胜感激。
$(document).ready(function(){
var items = $('#stage li'),
itemsByTags = {};
// Looping though all the li items:
items.each(function(i){
var elem = $(this),
tags = elem.data('tags').split(',');
// Adding a data-id attribute. Required by the Quicksand plugin:
elem.attr('data-id',i);
$.each(tags,function(key,value){
// Removing extra whitespace:
value = $.trim(value);
if(!(value in itemsByTags)){
// Create an empty array to hold this item:
itemsByTags[value] = [];
}
// Each item is added to one array per tag:
itemsByTags[value].push(elem);
});
});
// Creating the "Everything" option in the menu:
createList('Everything',items);
// Looping though the arrays in itemsByTags:
$.each(itemsByTags,function(k,v){
createList(k,v);
});
$('#filter a').live('click',function(e){
var link = $(this);
link.addClass('active').siblings().removeClass('active');
// Using the Quicksand plugin to animate the li items.
// It uses data('list') defined by our createList function:
$('#stage').quicksand(link.data('list').find('li'));
e.preventDefault();
});
$('#filter a:first').click();
function createList(text,items){
// This is a helper function that takes the
// text of a menu button and array of li items
// Creating an empty unordered list:
var ul = $('<ul>',{'class':'hidden'});
$.each(items,function(){
// Creating a copy of each li item
// and adding it to the list:
$(this).clone().appendTo(ul);
});
ul.appendTo('#container');
// Creating a menu item. The unordered list is added
// as a data parameter (available via .data('list'):
var a = $('<a>',{
html: text,
href:'#',
data: {list:ul}
}).appendTo('#filter');
}
});
#container{
display: block;
overflow: hidden;
width: 960px;
margin: 0;
padding: 0px;
}
#container li{
float: left;
height: 229px;
list-style: none outside none;
margin: 20px;
position: relative;
width: 200px;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
border-radius: 7px;
overflow:hidden;
display:block;
}
#container li img{
border-radius:7px;
position: absolute;
}
#container ul{
margin: 0px;
padding: 0px;
}
#container ul.hidden{
display:none;
}
.boxcaption{
text-align: center;
float: left;
position: absolute;
height: 100px;
width: 190px;
color: #FFF;
display: none;
bottom: 0;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding-right: 5px;
padding-left: 5px;
background-image: url(../resources/blackbg.png);
background-repeat: repeat;
}
最佳答案
就像提到的 undefined 一样，您可能需要使用 jQuery 文档就绪处理程序。由于您已经在使用 jQuery，不妨使用 fadeToggle代码更少的方法。
$(document).ready(function() {
$('.captionfull').hover(function(){
$(".boxcaption", this).fadeToggle('slow');
});
});
关于jquery - 使用 Jquery 的悬停效果标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13043415/