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

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

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

Answer 3

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

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

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

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/

我希望在使用jQuery悬停时对div有一个发光效果

5 个答案: