用Jquery使图像发光

Question

我试图让图片发光，同时用jquery鼠标在图片上方盘旋。我试过多种方法，但都没有用。

那些应该发光的图片就是名单上的图片。我不得不使用Jquery，因为这是我从学校学到的.

是的，我可以使用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>

联署材料：

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

Answer 1

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

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

因为您已经用引号包装了"this"，所以jquery将其解释为一个字符串，并试图找到一个<this></this>元素。你想做的是：

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

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

Answer 2

就像这样也许..。

联署材料：

$('.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结构，因为我认为嵌入辉光工作更好，所以，.effect div涵盖了图像.看上去不错，伊豪。:)

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