我想用 jQuery 悬停时在 div 上产生发光效果答案

【问题标题】：I want a glow effect on a div on hover with jQuery我想用 jQuery 悬停时在 div 上产生发光效果
【发布时间】：2013-10-08 00:21:27
【问题描述】：

我想在 jQuery 悬停时在 div 上产生发光效果。这是我的代码：

HTML

<div class="tablerow">  
    <div class="image">
       <img src="1.jpg">
    </div>

    <div class="info">
       <p>
       <span class="heading">the PURSUIT of HAPPYNESS</span><br>       
       <span class="sub">Inspired by a true story.</span><br>
       <span class="data">Chris Gardener finds the "i" in Happiness...</span><p>
    </div>
</div>

CSS

.tablerow{
    width:100%;
    height:185px;
    padding:0;
}

我还有 8 个带有类 tablerow 的 div，我希望在使用 jquery 悬停时在其上产生发光效果（而不是阴影），因此需要一些帮助。（我用过 CSS 表格）。

【问题讨论】：

听起来不错。我也想要一个发光效果，让我们合作。到目前为止，您尝试过什么？
相关：stackoverflow.com/questions/12803549/…
@Ohgodwhy 老兄，我是 jQuery 新手，我只知道这么多。 $(".tablerow").hover(function(){ $(this)//鼠标进入 $(this)//鼠标离开 });但我不知道该使用什么功能

标签： jquery html css

【解决方案1】：

您只需使用 CSS 即可完成此操作。在悬停时使用插入框阴影（或单击设备），只需将颜色更改为您想要显示的任何黄色/金色或其他颜色。您可以将普通的盒子阴影用于盒子外想要的任何发光/阴影

element {
  box-shadow:none;
}
element:hover, element:active {
  box-shadow: inset 0 0 10px #(color of the glow you want);
}

这让你内外都有阴影

element {
  box-shadow:none;
}
element:hover, element:active {
  box-shadow: 0 0 5px #(color), inset 0 0 10px #(color of the glow you want);
}

【讨论】：

谢谢，但我想使用 jQuery，因为如果我使用 css，我有 9 个具有相同类的 div，那么整个 9 个 div 都会发光。所以我想知道使用“this”关键字。
它不会改变所有的 div，因为你只给你悬停在 :hover 类上的 div，它的工作方式与在 javascript 中使用 'this' 完全一样
好的，谢谢，我刚刚知道在 jQuery 中没有这种直接的发光效果，所以我将使用 CSS
如果有人反对这个答案，我会感到惊讶。我以为 :hover 只适用于元素，主要是因为我没有阅读不同的帖子。这确实会为我消除很多不必要的鼠标悬停代码混乱。
如果你想让它动画而不是出现，只需添加 transition: all .3s ease-in;到元素类！

【解决方案2】：

这是使用 box-shadow 属性的发光效果。这应该是不涉及 Javascript 的魔法。

.tablerow:hover {
    box-shadow: 0 0 20px blue;
}

【讨论】：

【解决方案3】：

您可以使用 css3 的 box-shadow。像这样的东西可能对你有用：

.glowMe:hover {
    -webkit-box-shadow:0 0 15px #ffffff; 
    -moz-box-shadow: 0 0 15px #ffffff;
    -ms-box-shadow: 0 0 15px #ffffff; 
    box-shadow:0 0 15px #ffffff;
}

如果你想用 jQuery 切换悬停，你可以这样做：

$('.my-div-class').on('hover', function() {
  $('.my-div-class').removeClass('glowMe');
  $(this).addClass('glowMe');
});

【讨论】：

我建议，如果你要显示供应商前缀，你应该尝试显示它们 all（你已经省略了 -ms 和 @ 987654324@（据我所知，他们还没有切换到 WebKit），仍然：+1。
啊，好点子！我忘记了-ms和-o。 :) 我主要使用 Bootstrap mixins，所以通常我只做 .box-shadow(0 0 15px #ffffff); :)

【解决方案4】：

看看这个 jsfiddle：

http://jsfiddle.net/XBNkn/

.box:hover
{
    box-shadow: 0px 0px 15px 5px #f2e1f2; 
    -webkit-box-shadow: 0px 0px 15px 5px #f2e1f2;
    -moz-box-shadow: 0px 0px 15px 5px #f2e1f2;
}

【讨论】：

【解决方案5】：

我认为您要求的是动画发光。我能够想出一个使用 jQuery、jQuery UI 和 jQuery UI 插件的解决方案。

你可以在这里查看 jsFiddle：http://jsfiddle.net/cyberdash/mAmvE/2/

$( ".tablerow" ).mouseenter(function() {
    $( this ).animate({boxShadow: '0 0 30px #ff0000'}, 200 );
});

$( ".tablerow" ).mouseleave(function() {
    $( this ).animate({boxShadow: '0 0 0 #000000'}, 200 );
});

我使用的插件可以在这里找到：http://www.bitstorm.org/jquery/shadow-animation/

【讨论】：