1

私は現在、誰かが私のサイトの製品画像にカーソルを合わせたときにスムーズなフェード効果を作成するのに役立ついくつかのCSSを伴う非常に基本的なJQueryスクリプトを持っています。ただし、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 に答える