在悬停时用灰色围绕图像和文本填充 div 框答案

【问题标题】：Fill the div box with grey around image and text on hover在悬停时用灰色围绕图像和文本填充 div 框
【发布时间】：2023-03-22 18:44:01
【问题描述】：

如果我用 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>

【问题讨论】：

标签： css html hover

【解决方案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;
}

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

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

【讨论】：

我稍微改了一下。我添加了一个类 .greyBoxOnHover:hover { background-color: #e2e3e4; }
我仍然对你的意思有点困惑。也许您正在寻找背景：灰色；而不是边框？
是的，我的意思是背景灰色。你觉得现在看起来很奇怪吗？不知道我是否喜欢背景的外观
@user3075987：我在图像顶部添加了一些填充，这样背景就不会位于图像边缘。查看到处使用的语法并摆弄它，构建你喜欢的。 fiddle

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

一个非常快速的示例：here。

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

【讨论】：

我不想要一个边框，我希望它用灰色填充空间。我该怎么做才能让它不跳
@user3075987 检查 css 中的“背景颜色”属性

【解决方案4】：

添加一些您想要附加到任何您想要通用行为的元素的通用类。为了我们的目的，我们称之为greyBoxOnHover。

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

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

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

【讨论】：