I want a glow effect on a div on hover with jQuery

Question

I want a glow effect on a div on hover with jQuery. Here's my code:

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

I have 8 more divs with the class tablerow on which i want a glow effect(not shadow) on hover with jquery, so needs some help with that. (I have used CSS tables).

Answer 1

You can accomplish this just using CSS. Use a inset box shadow on a hover (or click for devices) and just change the color to whatever yellow/gold or other color you want to display. You can just use a normal box shadow for any glow/shadows you want outside the box

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

this gets you a shadow inside and outside

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

This is a glow effect using the box-shadow property. This should to the magic without Javascript involved.

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