Question

我正在尝试在图像上移动时构建带有描述的图库。代码看起来不错，但是当您将鼠标光标移动到图像上时没有任何反应。我的问题是当我运行代码时"<div class='description_content'>"没有出现。感谢任何帮助。

HTML CODE：

<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){ 
$('#scroll_me').click(function() {
    var item_width = $('#portfolio-tiles li').outerWidth() + 2.5;
    var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
    $('#portfolio-tiles').animate({
        'left': left_indent
    }, 500, function() {
        $('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
        $('#portfolio-tiles').css({
            'left': '-302'+'px'
        });});
            });
            //********************************************** div.description
        //for each description div...
    $('div.description').each(function(){
        //...set the opacity to 0...
        $(this).css('opacity', 0);
        //..set width same as the image...
        $(this).css('width', $(this).siblings('img').width());
        //...get the parent (the wrapper) and set it's width same as the image width... '
        $(this).parent().css('width', $(this).siblings('img').width());
        //...set the display to block
        $(this).css('display', 'block');
    });

    $('#portfolio-tiles li').hover(function(){
        //when mouse hover over the wrapper div
        //get it's children elements with class description
        //and show it using fadeTo
        $(this).children('.description').stop().fadeTo(500, 0.4);
    },function(){
        //when mouse out of the wrapper div
        //use fadeTo to hide the div
        $(this).children('.description').stop().fadeTo(500, 0);
    });

 };<!-- End onload;
// end hide -->t = setInterval( function(){ $('#next').trigger('click'), 2000 } );
        //$('#stop').click( function(){
 //clearInterval(t);
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
    <ul id="portfolio-tiles">
<li>
    <a id="example2" href="p1.png">
        <img  alt="item1" src="p1.png">
            <div class='description'>
                <div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other  </div>
            </div>
    </a>
</li>
<li>
    <a id="example2" href="p2.png">
        <img  alt="item1" src="p2.png">
            <div class='description'>
                <div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other  </div>
            </div>
    </a>
</li>
<li>
    <a id="example2" href="p3.png">
        <img  alt="item1" src="p3.png">
            <div class='description'>
                <div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other  </div>
            </div>
    </a>
</li>
<li>
    <a id="example2" href="p5.png">
        <img  alt="item1" src="p5.png">
            <div class='description'>
                <div class='description_content'>The pack, the basic unit of wolf social life, is usually a family group. It is made up of animals related to each other  </div>
            </div>
    </a>
</li>    
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img  id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>

CSS代码：

#carousel_inner{
    background-color: #60F0F0;
    background-position: left top;
    position:relative;
    list-style-type: none;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px  0px 0px 0px;
    height: 220px;
    width: 652px;
    overflow: hidden;
    border:1px;
    border-style:solid;
    border-color:yellow;
 }
#portfolio-tiles li img {
    cursor:pointer;
    cursor: hand; 
    border:1px;
    border-style:solid;
    border-color:red; 
}
#portfolio-tiles li {
    position:relative;
    display: block;
    float: left;
    font-style: normal;
    font-weight: normal;
    list-style-type: none;
    margin: 0px  0px 0px 0px;
    padding: 0px 2.5px 0px 2.5px;
    width: 309px;
    border:1px;
    border-style:solid;
    border-color:green;
}
#portfolio-tiles  {
    position:relative;
    left:-302px; /* important (this should be negative number of list items width(including margin) */
    list-style-type: none; /* removing the default styling for unordered list items */
    margin: 0px;
    padding: 15px 15px 15px 15px;
    width:9999px; /* important */
}
img {
    width: 277px; 
}
#scroll_me{
     float: left;
     display: block;
     margin: 0px;
}
h2 {
    float: left;
    position: relative;
    top: 20px;
    left: 0;
    width: 100%;
}
div.description{
    position:absolute; /* absolute position (so we can position it where we want)*/
    bottom:0px; /* position will be on bottom */
    left:0px;
    display:none; /* hide it */
    /* styling bellow */
    background-color:black;
    font-family: 'tahoma';
    font-size:15px;
    color:white;
}
div.description_content{
    padding:10px;
}

Answer 1

您可以使用$('li').hover()和$(this).find('.description')来实现此目的。

替换这段代码......

$('#portfolio-tiles li').hover(function(){
    $(this).children('.description').stop().fadeTo(500, 0.4);
},function(){
    $(this).children('.description').stop().fadeTo(500, 0);
});

有了......

$('li').hover(function(){
    $(this).find('.description').stop().fadeTo(500, 0.4);
},function(){
    $(this).find('.description').stop().fadeTo(500, 0);
});

照片库与描述

1 个答案: