Question

我正在我的HTML文件中执行此操作，我想要一个悬停效果按钮。但是，这不起作用。

.carousel-caption button {
  padding: 20px 100px;
  background-color: Transparent;
  border: 1px solid #ff084e;
  float: right;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.carousel-caption button :hover {
  background-color: #4CAF50;
  /* Green */
  color: black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <img src="https://picsum.photos/50/10" alt="test" class="img-responsive" style="width: 100%">
      <div class="carousel-caption">
        <button>Learn More</button>
      </div>
    </div>
  </div>
</div>

我做错了。我的悬停效果不起作用。

Answer 1

删除按钮和：hover之间的空间

将button :hover替换为button:hover。

.carousel-caption button {
  padding: 20px 100px;
  background-color: Transparent;
  border: 1px solid #ff084e;
  float: right;
  font-size: 20px;
  font-weight: 600;
  color: white;
}

.carousel-caption button:hover {
  background-color: #4CAF50;
  /* Green */
  color: black;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-12">
      <img src="https://picsum.photos/50/10" alt="test" class="img-responsive" style="width: 100%">
      <div class="carousel-caption">
        <button>Learn More</button>
      </div>
    </div>
  </div>
</div>

CSS-按钮上的悬停效果不起作用

1 个答案: