Apply hover only in parent element

Question

Here is the sample of what i currently experience http://jsfiddle.net/Kamirusen/qeg7w/

The problem is that when hovered, all the elements inside the article are being hovered also. What I plan is only the article element would be hovered. Any idea on how would I solve this?

Here's the html code

<article class="cols" id="hov" style="width:30%; ">
<a href="#">
        <div class="pad_sulit_box">
        <img src="#" style="width: 100%; height: 150px">
        <h4>Title</h4>
    </div>                                                      
</a>                                                         
</article>

Here's the css

.pad_sulit_box {height: 220px;border-width: thin; border-color: #cdcdcd; border-style:      solid; padding: 10px;  }

#hov :hover {padding-top: 10px; padding-bottom: 10px; box-shadow: 0px 0px 20px #888888; }

Answer 1

Delete your space between #hov and :hover ;)

Answer 2

#hov :hover

Remove the space, like so:

#hov:hover