选项卡悬停 CSS

Question

这三种情况，有没有办法写成CSS？

在正常模式下
处于悬停模式
悬停

.tab:hover:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
opacity: 1;
transition: 0.5s opacity ease-in, 0.8s -webkit-transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease;
transition: 0.5s opacity ease-in, 0.8s transform ease, 0.8s -webkit-transform ease;
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px);
transform: translateY(0px);
text-shadow: 0 0 0;
}

enter image description here

js

Answer 1

CSS 中只有 :hover 但在 Javascript 中你有 mouseover 和 mouseout 是否有用？

选项卡悬停 CSS

tab hover with CSS

html

css

less