1

我目前有一个非常基本的 JQuery 脚本，伴随着一些 CSS，当有人将鼠标悬停在我网站上的产品图像上时，它有助于创建平滑的淡入淡出效果。然而，我希望能够做的是允许禁用 Javascript 的用户仍然仅通过 CSS 获得基本的显示/隐藏悬停效果。这怎么可能实现？
谢谢

这是我目前要给你的一个想法：

HTML

<li>
<a href="<?php the_permalink(); ?>" class="product_view_sm">..View Item..</a>
<?php the_post_thumbnail('prod-img-sm', array('class' => 'single_product_img_sm', 'alt' => 'View Product')); ?>
</li>

CSS

ul.product_list_sm li {
    overflow: hidden;
    width: 192px;
    height: 192px;
    margin-right: 15px;
    margin-bottom: 15px;
    float: left;
    position: relative;
}

a.product_view_sm { 
    font-family: aaaiightRegular;
    font-size: 15px;
    font-weight: normal;
    color: #000000;
    background: url(images/epr_store_product_overlay.png) no-repeat;
    width: 184px;
    height: 59px;
    padding: 125px 0px 0px 0px;
    position: absolute;
    top: 4px;
    left: 4px;
    display: block;
    text-align: center;
    z-index: 200;
}

img.single_product_img_sm { 
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
}

jQuery

// Fade anchor graphic in on hover for small products
$(document).ready(function() { 
    $('a.product_view_sm').css("opacity","0");
    $('.product_list_sm li').hover(
        function(){
            $(this).find('a.product_view_sm').animate({
                opacity: 1
            }, 250);
        },
        function(){
            $(this).find('a.product_view_sm').animate({
                opacity: 0
            }, 250);
        }
    );
});
4

1 回答 1

1

根据您的 javascript，这应该在没有动画的情况下做同样的事情

a.product_view_sm { opacity: 0; }
.product_list_sm li:hover a.product_view_sm { opacity: 1; }
于 2011-12-19T07:00:07.687 回答