css - 在悬停时用图像周围的灰色和文本填充 div 框

Question

如果我用 css 将鼠标悬停在图像和文本周围的 div 框上，我将如何添加灰色填充？

http://jsfiddle.net/huskydawgs/G3rLu/

    <div id="wrapper-icons">
    <div class="icons_row">
        <div class="icons_cell1">
            <a href="http://www.thesurfboardproject.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2013/10/JoseAngelGreg-Noll-1010-640x360.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.thesurfboardproject.com/" target="_blank">Surfboard 1</a></p>
        </div>
        <div class="icons_cell2">
            <a href="http://www.apple.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2012/07/1957-Hobie-Balsa.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.apple.com/" target="_blank">Surfboard 2</a></p>
        </div>
        <div class="icons_cell3">
            <a href="http://www.ibm.com/" target="_blank"><img alt="Surfboard" height="140" src="http://www.thesurfboardproject.com/wp-content/uploads/2013/09/Interisland-Gun.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.ibm.com/" target="_blank">Surfboard 3</a></p>
        </div>
        <div class="icons_cell4">
            <a href="http://www.espn.com/" target="_blank"><img alt="Surfboard" height="140" src="http://previewcf.turbosquid.com/Preview/2010/12/03__01_46_00/Surfboard_V3_2.jpge90d89a5-aaf9-44ac-b8cc-3327a5dc064bLarger.jpg" style="display:block; margin:0 auto;" width="160" /> </a>
            <p class="rtecenter"><a href="http://www.espn.com/" target="_blank">Surfboard 4</a></p>
        </div>
    </div>
</div>

Answer 1

添加 border: 2px solid transparent; 到 .icons_cell1, .icons_cell2, .icons_cell3, .icons_cell4 然后添加:

.icons_cell1:hover, .icons_cell2:hover, .icons_cell3:hover, .icons_cell4:hover {
    border:2px solid #BBB;
}

如果您只将悬停应用到代码，您会看到在 fiddle 中，内容会在边框出现时移动。为了解决这个问题，我们可以默认在单元格上放置透明边框。

我也推荐别人的建议，给你的 div 两个类，这样你就可以让你的 CSS 更小。