Question

我需要一个png图像的CSS悬停效果而不使用两个图像。基本上当用户将鼠标悬停在png图像上时，它会显示发光或其他效果，而不会突出显示整个框而只是png图像。我尝试过使用遮罩效果，但是需要第二张图像，而且我有多个没有相同形状的对象，我想为所有人使用一个css效果。

HTML

<div class="brighten pic">
    <img src="imgs/bookcase-02.png">
</div>

CSS

/*DARKEN*/
.brighten img {
display: inline-block;
margin: 100px auto;
-webkit-filter: brightness(100%);
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.brighten img:hover {
-webkit-filter: brightness(120%);
}

Answer 1

试试这个：

.brighten img {
    opacity: 0.3;
}

.brighten img:hover {
    opacity: 1;
}

Answer 2

你想在JQuery中做这样的事情。确保您正在调用JQuery库。我从谷歌打电话给我：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

然后你想做这样的事情：

<script type="text/javascript">
    $(document).ready(function () {
        $(".YourImageName").mouseenter(function () {
            $(this).css('box-shadow', '0 0 2px #888');
        });
        $(".YourImageName").mouseleave(function () {
            $(this).css('box-shadow', 'none');
        });
    }
</script>

这会为您提供边缘阴影，您可以更改颜色或完全更改css以更好地满足您的需求。

如果您向我们提供了您目前拥有的代码，那么将来会更有帮助，以便我们更好地了解您的需求。此代码取自实时Web使用，并更改为适用于您的方案。您必须将类名更改为您的。希望这有帮助！

CSS悬停效果为PNG图像

2 个答案: