我想在使用jQuery悬停的div上使用发光效果

我希望使用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>

---

我在tablerow类中还有8个div，我希望在使用jquery悬停时有发光效果（而不是阴影），所以需要一些帮助。（我使用了CSS表）。

您可以使用css3的框阴影。像这样的东西可能对你有用：

.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');
});

---

您只需使用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);
}

---

这是使用“长方体阴影”特性的辉光效果。这应该是在没有Javascript参与的情况下实现的

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

---

查看这个JSFIDLE：

.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;
}

---

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

您可以在这里查看JSFIDLE：

---

我使用的插件可以在这里找到：

听起来不错。我也想要发光效果，让我们合作吧。到目前为止，你想做什么？相关：@Ohgoddy，伙计，我对jQuery还不熟悉，我只知道这么多$（“.tablerow”）.hover（函数（）{$（this）//在鼠标上输入$（this）//在鼠标离开时}）；但我不知道该使用什么函数。我建议，如果你要显示厂商前缀，你可能应该尝试全部显示（你省略了

-ms

和

-o

（据我所知，他们还没有切换到WebKit），仍然：+1。啊，很好的一点！我忘了-ms和-o.：）我主要使用引导混音器，所以通常只使用谢谢，但我想使用jQuery，因为我有9个div与同一个类如果我使用css，那么整个9个div都会发光。所以我想使用“this”关键字。它不会改变所有的div，因为你只给你正在悬停的div一个：hover类，它的工作原理和在javascriptok中使用“this”完全一样。谢谢，我刚刚知道在jQuery中对glow没有这样的直接影响，所以我会和CSSI一起去，如果有人反对这个答案，我会感到惊讶。我想：hover只应用于元素，主要是因为我没有读过不同的帖子。这真的会为我消除很多不必要的mouseover代码混乱；到元素类！

.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;
}

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

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