时间戳

首页 > 解决方案 > Css - 按钮上的悬停效果不起作用

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

问题描述

我在我想要悬停效果按钮的 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>

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

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

删除按钮和 :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>

推荐阅读