Html 悬停时背景变暗，但不显示文本

我已经寻找了一段时间，但找不到一种方法来加深我的背景，同时保持我的文字原样。所有我需要的是文本是正常的！我是这个网站和html的新手，所以如果我马虎，我道歉

        <div class="col-md-4">
            <div class="col" id="one">Programming</div>
        </div>
    </div>
</div>

HTML:

        <div class="col-md-4">
            <div class="col" id="one">Programming</div>
        </div>
    </div>
</div>

退房

        <div class="col-md-4">
            <div class="col" id="one">Programming</div>
        </div>
    </div>
</div>

---

非常感谢

使用现有标记，您可以转换一个伪元素，或者使用实心背景并将不透明度从0（隐藏）切换到.5（50%），或者只使用

rgba（0,0,0,0.5）

并将不透明度从0切换到1。然后给跨度一个z索引，使其显示在顶部

        <div class="col-md-4">
            <div class="col" id="one">Programming</div>
        </div>
    </div>
</div>

html{
框大小：边框框；
}
身体{
字体系列：monospace；
填充：0；
保证金：0；
背景：黑色；
}
*,
*：之前，
*：之后{
框大小：继承；
}
.电网{
宽度：100%；
保证金：0自动；
}
.grid:之前，
.网格：之后，
.罗：之前，
.罗：之后{
内容：“；
显示：表格；
}
.网格：之后，
.罗：之后{
明确：两者皆有；
}
[类别*=“列-”]{
宽度：100%；
浮动：左；
最小高度：1px；
}
上校{
填充：1em；
保证金：1px；
长方体阴影：0 1px 1px rgba（0,0,0,3）；
最小高度：200px；
身高：继承；
}
#一,，
#二,，
#三,，
#四,，
#五,，
#六{
字号：18px；
字体大小：粗体；
颜色：黄色；
文本阴影：2PX2PX8PX黑色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
上校：之后{
背景：rgba（0,0,0,0.5）；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
内容：''；
不透明度：0；
-webkit过渡：不透明度。5s轻松；
-moz过渡：不透明度。5s缓解；
-o-转变：不透明度。5s缓解；
-ms转换：不透明度。5s缓解；
过渡：不透明度。5s缓解；
}
上校：悬停：之后{
不透明度：1；
}
斯潘上校{
位置：相对位置；
z指数：1；
}
@媒体屏幕和屏幕（最小宽度：1024px）{
.col-md-4{
宽度：33.33333%；
高度：473.5px；
}
}
#一个{
背景图像：url（“http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg");
}

程序设计

这完美地回答了我最初的问题，但我本应该更清楚。问题是，我将有多个像这样的块，那么我如何使它只影响悬停的行呢？另外，如果我有多行，我必须向下滚动才能到达最下面的行，那么如何获取这些行，因为这种方式只会影响当前窗口中的内容。“这完美地回答了我最初的问题”，那么你应该接受这一回答：）在别人回答后移动门柱是不礼貌的@乔塞瓦雷拉：你应该试着让它适应工作，如果你做不到，就写一个新的帖子。也就是说，它非常简单。将

position:relative

添加到

.col

此代码会使页面上的所有内容变暗。应该如何修改以仅使悬停的div变暗？