このシンプルなJQueryイメージホバースクリプトの作成は、JavaScriptが無効になっている場合にのみCSSに限定されています。

Question

私は現在、非常に基本的な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); 
     } 
    ); 
}); 

Answer 1

あなたのjavascriptをもとに、これはアニメーション

a.product_view_sm { opacity: 0; } 
.product_list_sm li:hover a.product_view_sm { opacity: 1; }