需要帮助使这个简单的 JQuery 图像悬停脚本仅在禁用 javascript 时才弃用为 CSS

Posted 2023-05-08

【中文标题】需要帮助使这个简单的 JQuery 图像悬停脚本仅在禁用 javascript 时才弃用为 CSS

【英文标题】：Need help making this simple JQuery image hover script deprecate to just CSS only when javascript is disabled

【发布时间】：2012-01-23 09:21:23

【问题描述】：

我目前有一个非常基本的 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);
        
    );
);

【参考方案1】：

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

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

【讨论】：

感谢您的回复，但我需要一种方法来允许在禁用 java 的用户不可用时使用 CSS-ONLY 版本。

您不应该这样做 - javascript 将“覆盖” CSS 行为，因为我们在两者中使用相同的属性（不透明度）。你试过了吗？参见示例：jsfiddle.net/5nBnv，现在删除 javascript 面板中的代码并再次运行演示。

抱歉，我看了你的回复太快了，不知何故天真地把它误认为是 JQuery 标记，回想起来完全可笑..lol。无论如何，我会试试这个。感谢您的帮助。

我认为因为您没有标记“css”的问题，所以没有使用 CSS 语法突出显示。

有点跑题了，但是如果您将鼠标悬停多次，您知道如何使动画停止重复触发吗？