时间戳

首页 > 解决方案 > 如何在 javascript 中增加 onmouseover 事件的转换时间？

javascript - 如何在 javascript 中增加 onmouseover 事件的转换时间？

问题描述

$(function() {
$('details').on('mouseover', function() {
$(this).attr('open', true);
}).on('mouseout', function() {
$(this).attr('open', 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 事件的过渡时间？现在，两者都是即时的。

这是一支带有实际代码的笔。除了 mouseover 和 mouseout 的过渡时间之外，一切都正常工作。这就是我要碰一堵砖墙的地方。

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

标签： javascriptjquerycssmouseover

解决方案

我认为这达到了您正在寻找的效果。此动画的唯一缺点是当鼠标移出时元素不会出现延迟的淡出/隐藏。

b {
  animation: visible 1s linear forwards;
}

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

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

我希望这能减轻你的头痛。周末愉快。

推荐阅读