私がホバーしたときにDivを見る

Question

私はそれらの上に乗りたい写真が入ったストリップを持っていて、写真の下にテキストが写真の下にポップしています。

私はCSSに問題があると思います。そしてもしあなたがそれをやることができれば、おそらくその移行を働かせるようにしてください。ここで

はCSSとHTMLである：

.procat{ 
 
    background-color: #555555; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 
.procat img{ 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 
.procath{ 
 
    display: none; 
 
    transition: 1s; 
 
} 
 
.procath a.procath:hover{ 
 
    display: block; 
 
    transition: 1s; 
 
    background-color:dimgrey; 
 
}

<div class="procat"> 
 
       <a class="tb" href="ThunderBird"> 
 
        <img width="100px" height="100px" src="pic/icons/phone.png"> 
 
       </a> 
 
       <a href="ZeroBook"> 
 
        <img width="100px" height="100px" src="pic/icons/laptop.png"> 
 
       </a> 
 
       <a href="ProjectTime"> 
 
        <img width="100px" height="100px" src="pic/icons/car.png"> 
 
       </a> 
 
       <div class="procath"> 
 
        <h6> 
 
         ThunderBird 
 
        </h6> 
 
       </div> 
 
      </div>

Answer 1

displayプロパティが移行することはできません。代わりにvisibilityを使用して、適切なセレクタを使用してください。このリンクはホバー上の他の要素に影響を与えるの詳細を説明する必要があります。またHow to affect other elements when a div is hovered

、解決策以下

.procat{ 
 
    background-color: #555555; 
 
    padding-top: 15px; 
 
    padding-bottom: 15px; 
 
} 
 
.procat img{ 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 
.procath{ 
 
    visibility: hidden; 
 
    transition: 1s; 
 
} 
 
.procat a:hover ~ .procath{ 
 
    visibility:visible; 
 
    transition: 1s; 
 
    background-color:dimgrey; 
 
}

<div class="procat"> 
 
       <a class="tb" href="ThunderBird"> 
 
        <img width="100px" height="100px" src="pic/icons/phone.png"> 
 
       </a> 
 
       <a href="ZeroBook"> 
 
        <img width="100px" height="100px" src="pic/icons/laptop.png"> 
 
       </a> 
 
       <a href="ProjectTime"> 
 
        <img width="100px" height="100px" src="pic/icons/car.png"> 
 
       </a> 
 
       <div class="procath"> 
 
        <h6> 
 
         ThunderBird 
 
        </h6> 
 
       </div> 
 
      </div>