实现悬浮切换内容效果应该给哪个元素添加transition过渡属性？

问题核心原因 #

CSS transition 对 display 属性不生效，你直接切换display: none和display: block属于非连续属性变化，因此过渡效果无法触发。

修复方案 #

方案1：保留现有JS逻辑调整 #

修改CSS代码

.sop-body{
    flex: 1;
    background-color: #EAC435;
    /* 用grid实现两个元素叠层，不需要固定高度 */
    display: grid;
}
.sop-body h1, .sop-body p{
    /* 两个元素放在同一网格单元格，自动叠层 */
    grid-area: 1 / 1 / -1 / -1;
    transition: all 0.3s ease-in-out;
}
.sop-body h1{
    text-align: center;
    margin-top:125px;
    /* 初始状态可见 */
    opacity: 1;
    visibility: visible;
}
.sop-body h1.hidden{
    opacity: 0;
    visibility: hidden;
}
.sop-body p{
    margin:5%;
    letter-spacing: 1px;
    font-size: large;
    margin-top: 80px ;
    /* 初始状态隐藏 */
    opacity: 0;
    visibility: hidden;
}
.sop-body p.show{
    opacity: 1;
    visibility: visible;
}
.sop-img{
    flex: 1;
    overflow-y: hidden;
}

修改JS代码

var sopBody = document.getElementById("sop-p");
var sopHead = document.getElementById("sop-head")

function showSop(){
    sopHead.classList.add('hidden');
    sopBody.classList.add('show');
}

function hideSop(){
    sopHead.classList.remove('hidden');
    sopBody.classList.remove('show');
}

方案2：纯CSS实现（无需JS，更简洁） #

直接删除HTML上的onmouseover、onmouseout事件和所有相关JS代码，仅用CSS的:hover伪类即可实现效果：

.sop-body{
    flex: 1;
    background-color: #EAC435;
    display: grid;
}
.sop-body h1, .sop-body p{
    grid-area: 1 / 1 / -1 / -1;
    transition: all 0.3s ease-in-out;
}
.sop-body h1{
    text-align: center;
    margin-top:125px;
    opacity: 1;
    visibility: visible;
}
.sop-body p{
    margin:5%;
    letter-spacing: 1px;
    font-size: large;
    margin-top: 80px ;
    opacity: 0;
    visibility: hidden;
}
/* 悬浮时自动切换状态 */
.sop-body:hover h1{
    opacity: 0;
    visibility: hidden;
}
.sop-body:hover p{
    opacity: 1;
    visibility: visible;
}
.sop-img{
    flex: 1;
    overflow-y: hidden;
}

你可以根据自己的需求选择任意一种方案，过渡时长可以自行调整transition属性里的时间参数。

内容的提问来源于stack exchange，提问作者Mohammed Hassan