Html CSS，将框悬停在仅出现在一个图像上的图像上_Html_Css

Html CSS，将框悬停在仅出现在一个图像上的图像上

html css

Html CSS，将框悬停在仅出现在一个图像上的图像上,html,css,Html,Css,我已经成功地将悬停颜色和文本编码到图像上。我想为剩下的三张图片复制一下。现在，代码成功地执行了第一个映像，但其余的都没有。我做错了什么？非常感谢。代码如下： /*睡莲垫定位*/ 链接1{ 显示：块；浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 链接2{ 显示：块；浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：

我已经成功地将悬停颜色和文本编码到图像上。我想为剩下的三张图片复制一下。现在，代码成功地执行了第一个映像，但其余的都没有。我做错了什么？非常感谢。代码如下：

/*睡莲垫定位*/ 链接1{ 显示：块；浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 链接2{ 显示：块；浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px；右边距：55px； } 链接3{ 显示：块；浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px； } 链接4{ 显示：块；浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px； } /*睡莲垫定位*/ /*图像悬停css*/ 悬停1{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } 叠加{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 框1：悬停覆盖1{ 不透明度：20；高度：128px；宽度：128px； } /*方框二*/ 霍弗2{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } 覆盖层2{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 框2：悬停覆盖2{ 不透明度：20；高度：128px；宽度：128px； } /*方框三*/ 悬停3{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } 叠加3{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 框3：悬停覆盖3{ 不透明度：20；高度：128px；宽度：128px； } /*方框四*/ 悬停4{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } 叠加4{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 框4：悬停覆盖4{ 不透明度：20；高度：128px；宽度：128px； } 你好你好你好你好

这就是你想要做的吗

/*睡莲垫定位*/ 框1{ 显示：内联块； } 框2{ 显示：内联块； } 框3{ 显示：内联块； } 方框4{ 显示：内联块； } 链接1{ 显示：块； //浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 链接2{ 显示：块； //浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px；右边距：55px； } 链接3{ 显示：块； //浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px； } 链接4{ 显示：块； //浮动：左；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px； } /*睡莲垫定位*/ /*图像悬停css*/ 悬停1{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } 叠加{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 框1：悬停覆盖1{ 不透明度：20；高度：128px；宽度：128px； } /*方框二*/ 霍弗2{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } 覆盖层2{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 框2：悬停覆盖2{ op 人口：20；高度：128px；宽度：128px； } /*方框三*/ 悬停3{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } 叠加3{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 框3：悬停覆盖3{ 不透明度：20；高度：128px；宽度：128px； } /*方框四*/ 悬停4{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } 叠加4{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } 框4：悬停覆盖4{ 不透明度：20；高度：128px；宽度：128px； } 你好你好你好你好设置位置：每个覆盖父对象上的相对位置

由于您的悬停覆盖被设置为position:absolute，将它们从页面流中分离出来，因此需要在它们上面有一些position:relative的父元素。绝对元素的位置由HTML结构中最近的相对元素决定。如果HTML结构中没有任何内容设置为“相对”，则浏览器将与整个文档窗口一起运行，这意味着悬停覆盖都将沿浏览器的左边缘显示

在任何情况下，你都过度使用id；效率很低。你应该利用类，这是理解CSS最基本的东西。实际上，您可能永远不需要这样细粒度的id，如果您在1000个元素的情况下让浏览器陷入困境，可能有人会对性能提出理由

导航箱{ 显示器：flex； } .链接{ 宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px；位置：相对位置； } .标签{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } .覆盖{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：35px； } .box：悬停。覆盖{ 不透明度：20；高度：128px；宽度：128px； } 你好，111！！！你好！！！你好333！！！你好，444！！！

您的css对于四个链接ID和相关覆盖中的每一个都是相同的：因此您应该使用类而不是ID。这将大大减少您的代码。我已经将您的代码调整为使用类，但我保留了box1:hover.overlay{}/box2等。。css在结尾，因为你可能希望在悬停时显示不同不透明度/不同大小的框等。我调整了文本和alt文本，以便你可以看到哪个是哪个，因为图像不显示在片段中，并在box2:hover中添加了背景色，以说明如果你想在悬停时调整框的颜色，您可以在：hover css中进行修改

请注意，您可以使用多个类。我为margin css.l1和.l2创建了单独的类。您可以根据需要进行调整，和/或根据需要创建更多

希望这有帮助

p、我将它们向右浮动，而不是向左浮动，只是为了演示悬停，但是你当然可以将其更改回原来的位置

/*睡莲垫定位*/ lilylink先生{ 显示：内联块；位置：相对位置；垂直对齐：顶部；浮动：对；宽度：128px；高度：128px；高度：自动；填充：10px； } .l1{ 左边距：35px； } .l2{ 右边距：55px； } /*睡莲垫定位*/ /*图像悬停css*/ .盘旋{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } .覆盖{ 背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；位置：绝对位置；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px； } 框1：悬停。覆盖{ 不透明度：20；高度：128px；宽度：128px； } /*方框二*/ 框2：悬停。覆盖{ 不透明度：20；高度：128px；宽度：128px；背景颜色：蓝色； } /*方框三*/ 框3：悬停。覆盖{ 不透明度：20；高度：128px；宽度：128px； } /*方框四*/ 框4：悬停。覆盖{ 不透明度：20；高度：128px；宽度：128px； } 你好你好2 你好3 你好4 使用display:inline块而不是float。在下面的代码段中，我使用适用于box1、2、3和4的以下规则重写了您的设置，但您应该删除浮动。边界就是为了让div区域可见

#nav_box > div {
  border: 1px dotted green; 
  float: none;
  display: inline-block;
}

顺便说一句：如果您使用组合CSS选择器和子元素设置相同的类，那么您可以省略很多CSS代码

我在css中做了一些更改，下面的代码应该可以工作

您必须记住的是，设置为“绝对”的元素将查找位置设置为“相对”的父元素。因此，您需要将其添加到父元素，并设置绝对元素的位置，我在示例中使用了left和right

另外，由于代码重复了很多次，我为box、link、hover和overlay添加了类，它之所以有效，是因为在hover事件中，它只会修改子元素overlay，而不会修改其他元素

/*盒子定位*/ .盒子{ 位置：相对位置；浮动：左；显示器：flex；柔性流：行换行； } /*睡莲垫定位*/ .link{ 框大小：边框框；宽度：128px；高度：128px；高度：自动；右边填充：10px；左侧填充：10px；填充顶部：10px；利润率：10px； } /*悬停元素*/ .悬停{ 字体系列：Helvetica；字体大小：粗体；文本对齐：居中；颜色：234d20；字体大小：25px； } /*叠加元素*/ .覆盖{ 框大小：边框框；位置：绝对位置；排名：0；左：0；背景：rgba119、171、89、85；文本对齐：居中；不透明度：0；过渡：不透明度。25秒缓解；高度：128px；宽度：128px；溢出：隐藏；右边填充：10px；左侧填充：10px；填充顶部：10px；左边距：10px； } /*框悬停*/ .box：悬停。覆盖{ 边框：2件纯红；不透明度：1； } 你好你好你好你好

它击中了不止一个，尝试改变你好！！！为每个字符串添加不同的字符串，以查看所需内容

当我点击whenOk时，我试过了，现在当我将鼠标悬停在图像2-4上时，文本会发生变化，但hover+文本只会出现在第一个图像上。这可能意味着什么？造型上的不协调。检查css并确保所有内容都正确对齐。此外，每个链接id选择器都声明了两次高度。它要么是固定的像素，要么是自动的。不应该两者兼而有之。如果需要填充，可以将填充CSS缩短为一行：10px 10px 0 10px；通过验证程序运行css并修复了所有错误。将链接id填充更改为仅像素，无自动。还是没有骰子！