我希望在jQuery悬停的div上有一个辉光效应
我希望在jQuery悬停的div上有一个辉光效应
提问于 2013-10-07 15:41:19
我想在jQuery悬停的div上有一个辉光效果。这是我的密码：
<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个div和类tablerow，我希望在jquery悬停时有一个发光效果(而不是阴影)，因此需要一些帮助。(我使用过CSS表)。
回答 5
Stack Overflow用户
回答已采纳
发布于 2013-10-07 15:47:34
您可以使用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);
}Stack Overflow用户
发布于 2013-10-07 15:47:05
你可以使用css3 3的框影。像这样的东西可能对你有用：
.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');
});Stack Overflow用户
发布于 2013-10-07 15:47:40
这是一个使用框影属性的辉光效果。这应该不涉及Javascript的魔法。
.tablerow:hover {
box-shadow: 0 0 20px blue;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19228971
复制相关文章
相似问题
腾讯云开发者
