使用Jquery使图像发光

Make a Image glow with Jquery

本文关键字：图像 Jquery 使用      更新时间：2023-09-26

我正试图让图像发光，同时用jquery鼠标悬停在图像上方。我试过多种方法，但都没用。。

应该发光的图像就是列表中的图像。我必须使用Jquery，因为这是我从学校得到的Exercize。。。

是的，我可以使用Stackoverflow：p

HTML:

    <h1>Grand Theft Auto V - Showcase</h1>
</header>
<div id="contentHolder">
        <div id="three-columns" class="grid-container">
            <ul class="rig columns-3">
                <li>
                    <img src="images/1.jpg" />
                </li>
                <li>
                    <img src="images/2.jpg" />
                </li>
                <li>
                    <img src="images/3.jpg" />
                </li>
                <li>
                    <img src="images/4.jpg" />
                </li>
                <li>
                    <img src="images/5.jpg" />
                </li>
                <li>
                    <img src="images/6.jpg" />
                </li>
                <li>
                    <img src="images/7.jpg" />
                </li>
                <li>
                    <img src="images/8.jpg" />
                </li>
                <li>
                    <img src="images/9.jpg" />
                </li>
                <li>
                    <img src="images/10.jpg" />
                </li>
            </ul>
</div>
</body>
</html>

JS:

$(".rig img").hover(function(){
    $("this").css("box-shadow", "0px 0px 5px #ddd");
    }, function(){
    $("this").css("box-shadow", "0px 0px 5px #ddd");
});

在您的javascript中，您有如下内容：

$("this").css("box-shadow", "0px 0px 5px #ddd");

因为您已经将"this"封装在引号中，jquery将其解释为字符串，并尝试查找<this></this>元素。你想做的是：

$(this).css("box-shadow", "0px 0px 5px #ddd");

没有引号。在jquery中，$(this)是指当前上下文中的元素。对于悬停，它是当前正在悬停的元素。

类似的事情，也许。。。

JS:

$('.holder').hover(function(){
    $(this).find('.effect').addClass('glow');
    }, function(){
     $(this).find('.effect').removeClass('glow');
});

HTML:

<div class="holder">
    <div class='effect'></div>
   <img src='http://lorempixel.com/400/200/'>
    </div>

CSS：

.glow {
     box-shadow:0px 0px 50px 30px #dedede inset;    
}
body {
    background:black;
}
img {
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
}
.effect {
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
.holder {
    cursor:pointer;
    position:relative;
    z-index:2;
    width:400px;
    height:200px;
    border-radius:6px;
}

我做了一个复杂的html结构，因为我认为inset-glow效果更好，所以.effet-div覆盖了图像。。。看起来不错，imho。：）

演示：http://jsfiddle.net/L9dypg7f/

相关文章：