Question

我有一组图片。每当我将鼠标悬停在一个上面时，我希望通过降低其他图像的不透明度来突出显示它。因此将光标放在其上的图像将保持其颜色。我尝试使用下面的代码，但它没有工作。我做错了什么？

HTML：

<div id="first">
<img id="image1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image4" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image5" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image6" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image7" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image8" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image9" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
<img id="image10"src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"/>
</div>

CSS：

#first:hover img
{                            /* PARENT HOVER */
    opacity:0.4;  
    cursor: pointer;                    /* Dim all */
}    
#first img:hover
{                            /* SINGLE HOVER */
    opacity: 1;                /* Max one */
    color:#000000;
    cursor: pointer; 
}

Answer 1

你可以通过jQuery来实现。下面的代码需要Jquery。

<script>
    jQuery(function($) {
        $('#first img').hover(function() { // on mouseover
            $('#first img').css({'opacity':0.4}); // you can animate this as well
            $(this).css({'opacity':1});
        }, function() { // on mouseout
            $('#first img').css({'opacity':1});
        });
    });
</script>

Answer 2

@Randy在您的代码中，如果我将悬停在空白区域或任何地方，那么它会像所有人一样盘旋，所以请检查我的代码并告诉我是否符合您的需要..

在我的代码中你会看到，如果你将鼠标放在li之间的间隙，它仍然会工作。希望我得到你的问题或者让我知道是否还有其他问题..

谢谢...

查找Here

Code

通过更改不透明度突出显示图像

2 个答案: