代码之家 › 专栏 › 技术社区 › john Rizzo

按钮背景颜色、悬停和活动状态存在问题

background button css html

john Rizzo · 技术社区 · 4 月前

作为一名两年前的前新兵,我正在进行奥丁项目,以此摆脱铁锈。我正在进行一个项目,你必须把之前制作的石头布剪刀游戏变成一个UI,我很难让我的按钮看起来正确。

我有3个方形按钮,每个按钮都有一个div,里面有一个表情符号,出于某种原因,这些按钮有一个白色背景,我不会给它们。它们也不会对我在css中分配给它们的:hover和:active更改做出响应。如果我更改css中按钮的背景颜色,它似乎会更改这个白色框,但仍然不会更改悬停和活动状态

相关代码:

button{
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  outline: none;
  /* background-color: var(--secondary-dark); */
}
}
.btncontainer{
  display: flex;
  justify-content: space-evenly;
  padding: 30px;
}
.btn{
  border-radius: 10px;
  background-color: var(--secondary-dark);
}
.btnbox{
  width: 160px;
  height: 160px;
}
.sign{
  font-size: 80px;
  margin-bottom: 10px;
}
.btn:hover{
  background-color: var(--secondary-dark-active);
}
.btn:active{
  background-color: var(--secondary-dark-active);
}

<div class="btncontainer">
  <button class="btn, btnbox" id="rockbtn"><div class="sign">â</div></button>     
  <button class="btn, btnbox" id="scsrbtn"><div class="sign">â</div></button>
  <button class="btn, btnbox" id="pprbtn"><div class="sign">â</div></button>
</div>

如果我取消注释“换行”按钮,那么背景颜色会变为我在那里做的任何颜色,但这仍然无法修复悬停和活动属性。

2 回复 | 直到 4 月前

Shailesh 4 月前

您可以更改悬停的CSS

.btncontainer {
  display: flex;
  justify-content: space-evenly;
  padding: 30px;
  :hover {
    background-color: green; // desire color
  }
}

对于活动类,创建一个新的css

.active-btn {
  background-color: blue; // desire color
}

当任何按钮处于活动状态时,比较id并设置此css

 <div className='btncontainer'>
        <button
          className={`btn sign btnbox ${
            activeBtn === 'rockbtn' ? 'active-btn' : ''
          }`}
          id='rockbtn'
         
        >
          â
        </button>
        <button
          className={`btn sign btnbox ${
            activeBtn === 'scsrbtn' ? 'active-btn' : ''
          }`}
          id='scsrbtn'
        
        >
          â
        </button>
        <button
          className={`btn sign btnbox ${activeBtn === 'pprbtn' ? 'active-btn' : ''}`}
          id='pprbtn'
         
        >
          â
        </button>
      </div>

Luis 4 月前

您需要将类名更改为 class="btn btnbox" 。如果要使用多个类名,则必须用空格而不是逗号分隔它们。

<div class="btncontainer">
    <button class="btn btnbox" id="rockbtn"><div class="sign">â</div></button>     
    <button class="btn btnbox" id="scsrbtn"><div class="sign">â</div></button>
    <button class="btn btnbox" id="pprbtn"><div class="sign">â</div></button>
</div>

Parsa Farahani 4 月前

所以有两个问题。首先,你有一个}按钮类,我们不需要它。第二,你上课的方式不对。它不是 <button class="btn, btnbox" id="rockbtn"> <div class="sign">â</div> </button> 它是 <button class="btn btnbox" id="rockbtn"> <div class="sign">â</div> </button>

没有“,”。