如何增加JavaScript中onmouseover事件的转换时间？

问题描述

$(function() {
$('details').on('mouseover',function() {
$(this).attr('open',true);
}).on('mouseout',false);
})
});

summary::-webkit-details-marker {
color: #00008B;
font-size: 75%;
margin-right: 2px;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 14px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 14px;
}
.wrapper div {
width: 30%;
height: 150px;
float: left;
}
.wrapper:hover div {
width: 16%;
transition: 0.3s;
}
.wrapper div:hover {
width: 40%;
transition: 0.3s;
}
.wrapper {
    width: 100%;
}
.div1
{
width: 16.1%;
height: 150px;
padding: 10px;
border: 2px solid blue;
border-radius: 10px;
background-color: white;
float:left;
overflow-y:auto;
}

<div class="wrapper">
<div class="div1" align="left">
<section>
<article>
<details>
<summary><a href="#"><u>General Link</u></a></summary>
<p><b>Some text to be visibile on mousover</b></p>
</details>
</article>
<article>
<details>
<summary><a href="#"><u>General Link</u></a></summary>
<p><b>Some text to be visibile on mousover</b></p>
</details>
</article>
</section>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

我正在使用扩展包装器。在过渡效果方面效果不错。

虽然是星期五，但我的大脑却炸了，这是我需要帮助的地方：

我需要添加什么来延长“常规链接”下拉菜单的mouseover和mouseout事件上的过渡时间？现在，两者都是立即生效的。

这是一支使用代码的笔。除了鼠标悬停和鼠标移出时的过渡时间之外，其他所有操作均应正常进行。那就是我要碰到的砖墙。

https://codepen.io/alalien/pen/VwaamLa

解决方法

我认为这可以达到您想要的效果。此动画的唯一缺点是，当您将鼠标移出时，元素上不会出现延迟的淡入/隐藏。

b {
  animation: visible 1s linear forwards;
}

@keyframes visible {
  from {
    visibility: hidden;
    opacity: 0;
  }
  to {
    visibility: visible;
    opacity: 1;
   }
}

您可以添加一个转换以使文本从a-tag向下滑动，但是随后您将不得不在父元素上进行绝对定位和边距操作。

我希望可以减轻您的头痛。祝您周末愉快。