Q&A前提
tailwind css でhover機能を実装しようと思います。現在gridで4×2個のブロックを並べています。そのうちの1つにhoverしたらリストが現れるようにしたいです。
ulタグの高さを抑えてcssでいうhiddenをしようと思いtruncateをしたのは良いものの、そこからhoverすることができません。それと加えてgridの1つの高さを変えると他のものにも適応されてしまうので、1つだけ変化させる方法があれば教えてほしいです。
該当のソースコード
techview.blade.php
1<script src="https://kit.fontawesome.com/c8b1e6b383.js" crossorigin="anonymous"></script> 2<x-app-layout> 3 <x-slot name="header"> 4 <h2 class="font-semibold text-xl text-gray-800 leading-tight"> 5 技術一覧 6 </h2> 7 8 </x-slot> 9 <div class="grid grid-rows-4 grid-flow-col gap-4"> 10 <a class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg hover:shadow-2xl transition duration-500"> 11 <span class="icon"><i class="fa-solid fa-kitchen-set"></i></span> 12 <span class="title">料理</span> 13 </a> 14 <a href="{{ route('postart.index')}}" class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg hover:shadow-2xl transition duration-500"> 15 <span class="icon"><i class="fa-solid fa-palette"></i></span> 16 <span class="title">イラスト</span> 17 </a> 18 <a class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg hover:shadow-2xl transition duration-500"> 19 <span class="icon"><i class="fa-solid fa-computer"></i></span> 20 <span class="title">IT</span> 21 </a> 22 <a class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg hover:shadow-2xl transition duration-500"> 23 <span class="icon"><i class="fa-solid fa-chess-king"></i></span> 24 <span class="title">囲碁将棋チェス</span> 25 </a> 26 <a class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg hover:shadow-2xl transition duration-500"> 27 <span class="icon"><i class="fa-solid fa-flask"></i><i class="fa-solid fa-atom"></i></span> 28 <span class="title">科学（理学）</span> 29 </a> 30 <a class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg hover:shadow-2xl transition duration-500"> 31 <span class="icon"><i class="fa-solid fa-wrench"></i></span> 32 <span class="title">科学（工学）</span> 33 </a> 34 <a class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg hover:shadow-2xl transition duration-500"> 35 <span class="icon"><i class="fa-solid fa-video"></i></span> 36 <span class="title">動画制作</span> 37 </a> 38 <div class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg hover:shadow-2xl transition duration-500"> 39 <span class="icon"><i class="fa-solid fa-medal"></i></span> 40 <span class="title">スポーツ</span> 41 <ul class="h-0 truncate "> 42 <li> 43 <a class="hover:pt-10"> 44 <span class="icon-sports"><i class="fa-solid fa-person-running"></i><i class="fa-solid fa-person-swimming"></i></span> 45 <span class="title-sports">陸上水泳</span> 46 </a> 47 </li> 48 <li> 49 <a class="sports"> 50 <span class="icon-sports"><i class="fa-solid fa-baseball-bat-ball"></i><i class="fa-regular fa-futbol"></i></span> 51 <span class="title-sports">球技</span> 52 </a> 53 </li> 54 <li> 55 <a class="sports"> 56 <span class="icon-sports"><i class="fa-solid fa-person-skiing"></i><i class="fa-solid fa-person-skating"></i></span> 57 <span class="title-sports">雪山氷上競技</span> 58 </a> 59 </li> 60 <li> 61 <a class="sports"> 62 <span class="icon-sports"><i class="fa-solid fa-user-ninja"></i><i class="fa-solid fa-sword"></i></span> 63 <span class="title-sports">闘技</span> 64 </a> 65 </li> 66 </ul> 67 </div> 68 69 </div> 70 71 72</x-app-layout>
試したこと
違うところにhoverやtruncateを置くとガクガクしたりするのでどこに置けば良いのか分かりません。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
自己解決
<div class="bg-blue-100 w-max rounded-3xl ml-2 mt-2 shadow-lg h-6 hover:shadow-2xl transition duration-500"> <ul class="bg-blue-200 w-max rounded-xl h-3 hover:h-max truncate"> <li></li> </div>
のようにulでhover:h-maxとしたら一応形になりました。
投稿2022/10/13 00:36
総合スコア19
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。