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)引用当前上下文中的元素。悬停时，它是当前悬停的元素。

Answer 2

这样的事，也许......

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结构，因为我认为插入的发光效果更好，所以，.effect div覆盖图像...看起来不错，imho。：）

DEMO： http://jsfiddle.net/L9dypg7f/

使用Jquery使图像发光

2 个答案: