hoverを使ってvisibilityの変更をしたい
こんばんは。
laravelを用いてメモアプリを作成しているのですが、ホバーによるvisibilityのhidden,visibleの切り替えができず困っています。
index.blade.php
<div class="col">
<div class="card bg-light mt-3" style="width: 18rem">
<div class="card-body">
<h4 class="card-title">{{ $memo->title }}</h4>
<div class="d-flex align-items-center">
</div>
<p class="card-text">{{ $memo->content }}</p>
<div>
@foreach ($memo->tags()->orderBy('id', 'asc')->get() as $tag)
<span class="badge bg-secondary mt-2 me-2 fw-light">{{ $tag->name }}</span>
@endforeach
</div>
</div>
<div class=" text-body-secondary">
<div class="text-center">
<p id="countdown{{ $memo->id }}"></p>
</div>
<div class="d-inline-block memo-action">
<a href="#" data-bs-toggle="modal" data-bs-target="#editMemoModal{{ $memo->id }}"><i class="fa-solid fa-pen icon px-2"></i></a>
<a href="#" data-bs-toggle="modal" data-bs-target="#deleteMemoModal{{ $memo->id }}"><i class="fa-solid fa-trash-can icon px-2"></i></a>
<a href="#" data-bs-toggle="modal" data-bs-target="#showTagModal{{ $memo->id }}"><i class="fa-solid fa-tags icon px-2"></i></a>
</div>
</div>
</div>
</div>
.memo-action {
visibility: hidden;
transition: 0.2s;
}
.memo-action:hover {
visibility: visible;
background-color: aqua;
}
カラーをつけているのはホバーが効いているかの確認用なのですが、hiddenを消すとホバーが効き（青くなり）、hiddenをつけるとホバーが効かなくなります。
どうしてなのでしょう？自分でアプリを作成するのは初めてなので、あまり知識はありません。不足している情報等ありましたら指摘していただけると助かります。
ちなみにbootstrapのバージョンは5.2.3です。
0 likes
