猿问

HTML 填充背景颜色问题

我的问题涉及“详细信息”按钮的背景颜色。我遇到的问题是并非所有按钮区域都填充了颜色。按钮图片

<div className={classes.DetailsBtn}>

    <a href="">

       Details

    </a>

</div>

.DetailsBtn {

  flex: 0 0 10%;

  text-align: center;

  border: 1px solid rgba(3, 37, 65, 0.25);

}


.DetailsBtn a {

  display: inline-block;

  width: 100%;

  height: 100%;

  font-size: 14px;

  text-transform: uppercase;

  line-height: 26px;

  text-decoration: none;

  background: #032541;

  color: #fff;

  transition: all 0.5s;

}


.DetailsBtn a:hover {

  background: #fff;

  color: #032541;

}


白衣非少年
浏览 81回答 1
1回答

萧十郎

按钮周围的灰线是由于 css 中的“边框”设置造成的。可以通过进行以下更改来删除它：从“div”级别删除边框 (&nbsp;.DetailsBtn&nbsp;)将边框添加到“.DetailsBtn a”将边框添加到“.DetailsBtn a:hover”工作代码：<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <title>Button colour</title>&nbsp; &nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .DetailsBtn {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; flex: 0 0 10%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-align: center;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .DetailsBtn a {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height: 100%;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; line-height: 26px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #032541;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; transition: all 0.5s;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid rgba(3, 37, 65, 0.25);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .DetailsBtn a:hover {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: #fff;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color: #032541;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; border: 1px solid rgba(3, 37, 65, 0.25);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div class="DetailsBtn" style="width:200px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Details&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </body></html>
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答