Css 悬停按钮时在按钮上添加渐变，而不会影响文本
我尝试在按钮上添加一个渐变，这个按钮有一个背景图像，同时悬停它，而不会影响/覆盖文本Css 悬停按钮时在按钮上添加渐变，而不会影响文本,css,Css,我尝试在按钮上添加一个渐变，这个按钮有一个背景图像，同时悬停它，而不会影响/覆盖文本 div.test{ 背景图像：线性渐变（向右，#f9f9f9，#a2a2a2，#f9f9f9）； 不透明度：0； 位置：绝对位置； 宽度：260px； 高度：80px； 利润上限：-23.5px； z指数：2； } 分区测试：悬停{ 不透明度：0.2； } div.menuleftbutton{ 位置：绝对位置； 宽度：260px； 高度：80px； 利润率：150px 8%0px； 背景色：蓝色；/*这将被
div.test{
背景图像：线性渐变（向右，#f9f9f9，#a2a2a2，#f9f9f9）；
不透明度：0；
位置：绝对位置；
宽度：260px；
高度：80px；
利润上限：-23.5px；
z指数：2；
}
分区测试：悬停{
不透明度：0.2；
}
div.menuleftbutton{
位置：绝对位置；
宽度：260px；
高度：80px；
利润率：150px 8%0px；
背景色：蓝色；/*这将被图像替换*/
}
div.menuleftbuttonext{
利润率：23.5px 0px 23.5px；
背景颜色：黄色；
字体大小：33px；
高度：33像素；
}
这里有文字
位置：此处可能需要绝对值来将文本与此处的按钮背景分开。以下是我的想法：
html:
我修改了HTML，因此您只有一个内部和一个外部div
我更改了CSS，因此本质上内部div设置了外部div的宽度和高度。这是因为您希望悬停效果覆盖整个“按钮”，我将悬停渐变放置在内部div上，而外部div获得背景图像。阅读CSS中的注释，在这里我解释了每个规则的作用
请注意在线性渐变上使用RGBA。这是为了控制渐变的不透明度，我使用了0.5
来表示不透明度，这样在悬停时更容易看到变化，但可以轻松地将其更改回0.2，以获得所需的精确外观。十六进制到rgba转换器：如果需要
*{
框大小：边框框；
}
.menuleftbutton{
位置：绝对位置；
背景图片：url(https://picsum.photos/200)；/*背景图像*/
背景重复：无重复；
背景尺寸：封面；
背景位置：中心；
边距：0；/*仅用于演示，将边距更改为所需的边距*/
光标：指针；/*悬停…这让它感觉更像一个按钮*/
}
.menuleftbuttontext{
宽度：260px；
高度：80px；
字体大小：26px；/*减小了大小，因为它被拆分为两行*/
填充：0 20px；/*防止文本碰到边*/
行高：80px；/*行高与文本垂直居中的高度相同*/
}
.menuleftbutton:hover.menuleftbuttontext{/*当外部div悬停时，内部div的样式*/
背景图像：线性渐变（向右，rgba（249，249，249，0.5），rgba（162，162，162，0.5），rgba（249，249，249，0.5））；
}
这里有文字
谢谢你的回答！我只有一个小问题：我有一个类似的方法，但每次我把光标移到内部div上，背景都会切换回来，因为它显示我在内部徘徊，而不再在外部div上徘徊，我想。为什么这里不是这样？看看css中的最后一条规则。选择器的谓词是悬停在外部div上，这是唯一涉及的悬停规则。将其视为一个按钮，当您在按钮的任何部分上时，您希望使用悬停样式，即使在本例中，样式更改在内部div上。
<body>
<div id="menuleft">
<div id="menuleftsticky">
<a href="">
<div class="menuleftbutton">
<div class="menuleftbuttontext">
<div class="test">
</div>
<div class="buttontext">
TEST
</div>
</div>
</div>
</a>
</div>
</div>
</body>
div.buttontext {
position: absolute;
color: black;
z-index: 3;
width: 100%;
height: 0;
top: 30%;
}