javascript - 使用 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>

JS:

$(".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)引用当前上下文中的元素。对于悬停，它是当前悬停的元素。