Bootstrapでcarousel-caption内のbuttonにhoverやclickが効かない

YouYube動画で Bootstrapの学習をしています。
動画リンク

動画の通りにスライダーを作ったのですが、1枚目のスライド上に表示しているボタンにマウスがホバーしてもボタンとして動作しません。
スライド外で全く同じようにボタンを作った場合は動作しています。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <title>Complete Bootstrap 4 Website Layout</title>
7    <link
8      rel="stylesheet"
9      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
10    />
11    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
12    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
13    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
14    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
15    <link href="style.css" rel="stylesheet" />
16  </head>
17  <body>
18    <!-- Navigation -->
19    <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
20      <div class="container-fluid">
21        <a href="#" class="navbar-brand"> <img src="img/logo.png"/></a>
22
23        <button
24          class="navbar-toggler"
25          type="button"
26          data-toggle="collapse"
27          data-target="#navbarResponsive"
28        >
29          <span class="navbar-toggler-icon"></span>
30        </button>
31        <div class="collapse navbar-collapse" id="navbarResponsive">
32          <ul class="navbar-nav ml-auto">
33            <li class="nav-item active">
34              <a href="#" class="nav-link">Home</a>
35            </li>
36            <li class="nav-item">
37              <a href="#" class="nav-link">About</a>
38            </li>
39            <li class="nav-item">
40              <a href="#" class="nav-link">Services</a>
41            </li>
42            <li class="nav-item">
43              <a href="#" class="nav-link">Team</a>
44            </li>
45            <li class="nav-item">
46              <a href="#" class="nav-link">Connect</a>
47            </li>
48          </ul>
49        </div>
50      </div>
51    </nav>
52
53    <!--- Image Slider -->
54    <div id="slides" class="carousel slide" data-ride="carousel">
55      <ul class="carousel-indicators">
56        <li data-target="#slides" data-slide-to="0" class="active"></li>
57        <li data-target="#slides" data-slide-to="1"></li>
58        <li data-target="#slides" data-slide-to="2"></li>
59      </ul>
60      <div class="carousel-inner">
61        <div class="carousel-item active">
62          
63          <img src="img/background.png" class="w-100">
64          <div class="carousel-caption ">
65            <h1 class="display-2">Bootstrap</h1>
66            <h3>Complete Website Layout</h3>
67            <button type="button" class="btn btn-outline-light btn-lg">
68              VIEW DEMO
69            </button>
70            <button type="button" class="btn btn-primary btn-lg">
71              Get Started
72            </button>
73          </div>
74        </div>
75        <div class="carousel-item">
76          
77          <img src="img/background2.png" class="w-100" />
78        </div>
79        <div class="carousel-item">
80          <img src="img/background3.png" class="w-100" />
81        </div>
82      </div>
83    </div>
84</body>
85</html>

CSS
1@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');
2
3html,body {
4  height: 100%;
5  width: 100%;
6  font-family: 'Poppins', sans-serif;
7  color: #222222;
8}
9
10navbar {
11  padding: .8rem;
12}
13
14.navbar-nav li {
15  padding-right: 20px;
16}
17
18.nav-link {
19  font-size: 1.1em !important;
20}
21
22.carousel-caption h1 {
23  font-size: 500%;
24  text-transform: uppercase;
25  text-shadow: 1px 1px 15px #000;
26}
27.carousel-caption h3 {
28  font-size: 200%;
29  font-weight: 500;
30  text-shadow: 1px 1px 10px #000;
31  padding-bottom: 1rem;
32}
33
34/*---Media Queries --*/
35@media (max-width: 992px) {
36
37  }
38@media (max-width: 768px) {
39  
40}
41@media (max-width: 576px) {
42  
43}
44
45
46/*---Firefox Bug Fix --*/
47.carousel-item {
48  transition: -webkit-transform 0.5s ease;
49  transition: transform 0.5s ease;
50  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
51  -webkit-backface-visibility: visible;
52  backface-visibility: visible;
53}
54/*--- Fixed Background Image --*/
55figure {
56  position: relative;
57  width: 100%;
58  height: 60%;
59  margin: 0!important;
60}
61.fixed-wrap {
62  clip: rect(0, auto, auto, 0);
63  position: absolute;
64  top: 0;
65  left: 0;
66  width: 100%;
67  height: 100%;
68}
69#fixed {
70  background-image: url('img/mac.png');
71  position: fixed;
72  display: block;
73  top: 0;
74  left: 0;
75  width: 100%;
76  height: 100%;
77  background-size: cover;
78  background-position: center center;
79  -webkit-transform: translateZ(0);
80          transform: translateZ(0);
81  will-change: transform;
82}
83/*--- Bootstrap Padding Fix --*/
84[class*="col-"] {
85    padding: 1rem;
86}
87
88/*
89Extra small (xs) devices (portrait phones, less than 576px)
90No media query since this is the default in Bootstrap
91
92Small (sm) devices (landscape phones, 576px and up)
93@media (min-width: 576px) { ... }
94
95Medium (md) devices (tablets, 768px and up)
96@media (min-width: 768px) { ... }
97
98Large (lg) devices (desktops, 992px and up)
99@media (min-width: 992px) { ... }
100
101Extra (xl) large devices (large desktops, 1200px and up)
102@media (min-width: 1200px) { ... }
103*/

ちなみにCSSでbtnの色を変更することはできるのですが、やはりhoverは効きません。
よろしくお願いします。

m.ts10806

2020/01/02 23:58

Bootstrapのバージョンを　マイナーバージョン含めて提示してください

TaikiIshida

2020/01/03 00:09

４、０、０となっています。動画の概要にありましたhtmlテンプレートをそのまま使用しています。

m.ts10806

2020/01/03 00:12

質問は編集できますので質問本文に記載してください。念のため、CSS、Js読み込み部分も含めてご提示いただけますか？

m.ts10806

2020/01/03 00:18

ちなみに、私の手元の環境では4.0.0でもhoverきいてます。 clickもききますよ。画面キャプチャも提示してもらえますか？

m.ts10806

2020/01/03 01:02

style.cssの内容もご提示ください

行動規範の内容に同意します

回答2件

該当のHTMLのbutton要素に:hover擬似要素を適用してみました。
普通に効いてますね。

https://codepen.io/takuhito-h/pen/povdEyG

該当の動画は見ていませんが、もしかしたらセレクタの詳細度で:hover擬似要素の指定が負けているんじゃないでしょうか？
詳細度についてはこちらを読むと、ざっくり理解できるかと思います。

https://yantzn.com/entry/re-css-_study-01/

投稿2020/01/03 00:26

takuhito_hihara

総合スコア142

TaikiIshida

2020/01/03 02:05

初心者のため詳細は理解できませんでしたが、記事も参考にさせていただきました。ありがとうございます。

行動規範の内容に同意します

ベストアンサー

下記で確認しましたが、きいてるように見えます。

html
1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="utf-8">
5	  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
6    </head>
7<body>
8<!--- Image Slider -->
9    <div id="slides" class="carousel slide" data-ride="carousel">
10      <ul class="carousel-indicators">
11        <li data-target="#slides" data-slide-to="0" class="active"></li>
12        <li data-target="#slides" data-slide-to="1"></li>
13        <li data-target="#slides" data-slide-to="2"></li>
14      </ul>
15      <div class="carousel-inner">
16        <div class="carousel-item active">
17          <img src="http://placehold.jp/100x100.png" class="w-100">
18          <div class="carousel-caption ">
19            <h1 class="display-2">Bootstrap</h1>
20            <h3>Complete Website Layout</h3>
21            <button type="button" class="btn btn-outline-light btn-lg">
22              VIEW DEMO
23            </button>
24            <button type="button" class="btn btn-primary btn-lg">
25              Get Started
26            </button>
27          </div>
28        </div>
29        <div class="carousel-item">
30          <img src="http://placehold.jp/100x100.png" class="w-100" />
31        </div>
32        <div class="carousel-item">
33          <img src="http://placehold.jp/100x100.png" class="w-100" />
34        </div>
35      </div>
36    </div>
37<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
38<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
39<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
40</body>
41</html>