仅在父元素中应用悬停

时间:2013-12-25 15:00:37

标签: html css

以下是我目前遇到的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; }

2 个答案:

答案 0 :(得分:5)

  

#hov :hover

删除空格like so

#hov:hover

答案 1 :(得分:1)

删除#hov:hover;)

之间的空格