css 表示非表示系まとめ

Posted 2021-05-13

.visibility p {
visibility: hidden;
}
.visibility div:hover + p {
visibility: visible;
}

.opacity p {
opacity: 0;
}
.opacity div:hover + p {
opacity: 1;
}

.display p {
display: none;
}
.display div:hover + p {
display: block;
}

.height div + p {
box-sizing: border-box;
overflow: hidden;
height: 0px;
}
.height div:hover + p {
height: 100%;/* これだとtransition効く */
height: auto;
}

.position div + p {
position: relative;
top: -40px;
}
.position div:hover + p {
top: 0;
}