使用jQuery让div在鼠标悬停时产生发光效果

Question

我想用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表格。）

- Rahul Khatri

---

听起来很不错。我也想要一个发光效果，让我们合作吧。你到目前为止尝试了什么？ - Ohgodwhy

相关内容：http://stackoverflow.com/questions/12803549/touch-glow-example-with-css-and-jquery-enjoy - Aaron Digulla

@Ohgodwhy 兄弟，我是 jQuery 的新手，目前只搞明白了以下代码：$(".tablerow").hover(function(){ $(this)//鼠标移入时 $(this)//鼠标移出时 });但是我不知道该使用什么方法。 - Rahul Khatri

Answer 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);
}

- user934902

---

谢谢，但我想使用jQuery，因为我有9个具有相同类的div。如果我使用CSS，那么整个9个div都会发光。所以我想使用“this”关键字。 - Rahul Khatri

它不会改变所有的div，因为你只会给鼠标悬停在上面的div添加:hover类，这与JavaScript中使用“this”完全相同。 - user934902

好的，谢谢。我刚刚得知在jQuery中没有直接影响Glow效果的方法，所以我会使用CSS。 - Rahul Khatri

如果有人反对这个答案，我会感到惊讶。我曾认为:hover只适用于<a>元素，主要是因为我没有看到其他的帖子。这真的会为我减少很多不必要的onmouseover代码混乱。 - Datadimension

如果你想让它动起来而不是出现，只需将 transition: all .3s ease-in; 添加到元素类中即可！ - user934902

Answer 2

您可以使用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');
});

- Patrick Coffey

---

我建议，如果你要显示供应商前缀，最好尽量显示所有的（你已经省略了“-ms”和“-o”（据我所知，它们还没有完全转向WebKit），但仍然很好：+1）。 - David Thomas

啊，非常好的观点！我忘记了-ms和-o。 :) 我主要使用Bootstrap mixins，所以通常只需使用.box-shadow(0 0 15px #ffffff); :) - Patrick Coffey

Answer 3

这是使用box-shadow属性实现的发光效果。这应该可以在不涉及Javascript的情况下完成。

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

- Andrés Torres

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

- Vedat Milor

Answer 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/

- Joshua Nelson