Question

如果我用css将鼠标悬停在图片和文字上，我如何在div框中添加灰色填充？

    <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

为每个.icons_cell类添加一个：hover。或者给你所有的.iconscell（NUMBER）一个同一个类，这样你只需要编写一次css。

.icons_cell1:hover {
    border: 3px solid grey;
}

Answer 2

一个非常快速的样本：here。

只需使用.class:hover{...}在悬停时显示边框。请记住，如果没有设置默认边框，由于添加了边框，图像会来回跳转一点，因此在非悬停子句中添加白色边框。

Answer 3

添加一些要附加到您希望通用行为的元素的泛型类。出于我们的目的，我们称之为greyBoxOnHover。

.greyBoxOnHover:hover {
  border: 3px solid grey;
}

现在只需将其添加到您想要具有该行为的任何元素。如... ...

<div class="icons_cell4 greyBoxOnHover">
   ...
</div>

Answer 4

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

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

我也推荐其他人建议的内容，并给你的div两个类，这样你就可以缩小你的CSS。

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

4 个答案: