仅在父元素中应用悬停

Question

以下是我目前体验的样本http://jsfiddle.net/Kamirusen/qeg7w/

问题是,当盘旋时,文章内的所有元素也都在盘旋.我的计划只是文章元素会被徘徊.关于如何解决这个问题的任何想法？

这是html代码

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

这是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

#hov :hover

删除空格,如下所示:

#hov:hover