Question

我在将此代码实施到我的网站http://www.some-things.net/category/work/

时遇到问题

http://www.sohtanaka.com/web-design/css-on-hover-image-captions/

谁能看到我哪里出错了？我已经让它在coda中工作了 - 但是当我尝试将它实现到wordpress时，就会出现问题。

    <div style="clear:both"></div>
        <div class="gallery">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="portfolioItem">
                        <a href="<?php the_permalink() ?>" title="<?php the_title();?>"><?php the_post_thumbnail(); ?></a>
                <span class="desctitle"><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
</span> </div>
<?php endwhile; ?>
</div>

这是CSS：

    .portfolio {overflow:hidden;}
.gallery {
    margin-top:10px;
    padding-left:22px;
    margin-left:-22px;
    margin-bottom:20px;
    width:982px;
}

/* .portfolioItem {
    float:left;
    width:300px;
    margin-right:25px;
    overflow:hidden;
    margin-bottom:5px;
} */

.portfolioItem {
    float: left;
    overflow: hidden;
    position: relative;
    margin-right: 25px;
    margin-bottom: 5px;
}



.portfolioItem a {
    text-decoration: none;
    float: left;
}
.portfolioItem a:hover {
    cursor: pointer;
}



 /* .portfolioItem img {
    border:2px;
    border-color:000;
    border-style:solid; */
    /* border:none; */
    /* opacity:0.6;filter:alpha(opacity=60);} */


/* .gallery .portfolioItem img:hover {
opacity:1;filter:alpha(opacity=100);}
*/  


.portfolioItem a img {
    float: left;
    margin: 0;
    border: none;

}



/* boxes for portfolio item descriptions */


.portfolioItem a:hover .desctitle {
    display: block;
    font-size: 1.2em;
    padding: 0px 0;
    background: #111;
    filter:alpha(opacity=75);
    opacity:.75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /*--IE 8 Transparency--*/
    color: #fff;
    position: absolute;
    bottom: 0px;
    margin: 0;
    width: 300px;
    border-top: 1px solid #999;

}


/* .desctitle a {
    color:white;
    padding-left:12px;

    }
*/


.portfolioItem a .desctitle {   display: none; }

Answer 1

原来是格式错误 - /链接都错了。对于遇到类似问题的其他人来说，这是正确的代码......

    <div style="clear:both"></div>
        <div class="gallery">
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <div class="portfolioItem">
                        <a href="<?php the_permalink() ?>" class="desctitle" title="<?php the_title();?>"><?php the_post_thumbnail(); ?>
                <span class="desctitle"><?php the_title(); ?></a>
</span>                     

                    </div>

            <?php endwhile; ?>
        </div>

简单的CSS图像悬停问题

1 个答案: