[英]How to add hover colour to a div which has linear gradient Border?
I am trying to add hover color to this particular div but it dosen't work out, because of the gradient background that is added to get the border-radius working. 我正在尝试将悬停颜色添加到此特定的div,但由于添加了渐变背景以使边界半径正常工作,因此无法正常工作。
I am doing this in a React Component using css-modules . 我在使用css-modules的React Component中做到这一点。
What is the problem here? 这里有什么问题? I am not an expert at css but will love to know the reason of the problem and how to mitigate it . 我不是CSS方面的专家,但很想知道问题的原因以及如何解决这个问题。
.card{ width: 40%; height: 150px; border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; border-radius:8px; display:inline-block; } .card:hover{ background-color: rgba(0,0,0,0.04); }
<div class="card"> No Hover color red <br/> I am doing this in React a small gist of the problem </div>
Update 更新资料
After adding the styles as mentioned i get the opposite effect where the border gradient color appears on hover .If i add this i get the color but the b order color then disappears. 在添加了上述样式后,我得到了相反的效果,即悬停处出现了边框渐变颜色。如果添加此样式,则得到了颜色,但是b阶颜色消失了。
The gradient dosen't accept rgba with such low opacity for some reason , what is the reason for this 由于某些原因,渐变不接受具有如此低的不透明度的rgba,这是什么原因
.card:hover{
background:
linear-gradient(rgba(0,0,0,0.04),rgba(0,0,0,0.04)) padding-box;
} // no border color , when i change the color to rgba opacity it dosent work
rgba(0,0,0,0.1) works but why not rgba(0,0,0,0.04) rgba(0,0,0,0.1)有效,但为什么不行rgba(0,0,0,0.04)
You can fix it like that: 您可以这样修复它:
.card:hover{
background: red;
}
and it will work =) 它会工作=)
or, if you want to keep your gradient border: 或者,如果您想保留渐变边框:
.card:hover{
background: linear-gradient(red,red) padding-box,
linear-gradient(125deg, #42E4A3, #A383E8) border-box;
}
If you need a semitransparent color of background, you can re-edit your solution like this ( demo on Codepen ). 如果您需要半透明的背景色,则可以像这样重新编辑您的解决方案( Codepen上的演示 )。 But anyway you will see on hover bottom background because of semitransparency. 但是无论如何,由于半透明,您会在悬停底部的背景上看到。
In your :hover
style you should redefine the background
property with the border gradient, just simply replace the white color #fff
with your new color red
在您的:hover
样式中,您应该使用边框渐变重新定义background
属性,只需将白色#fff
替换为新的red
.card{ width: 40%; height: 150px; border: 2px solid transparent; background: linear-gradient(#fff,#fff) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; border-radius:8px; display:inline-block; } .card:hover{ background: linear-gradient(red,red) padding-box, linear-gradient(125deg, #42E4A3, #A383E8) border-box; }
<div class="card"> No Hover color red <br/> I am doing this in React a small gist of the problem </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.