⁉️问题描述
今天给社区帖子列表加了一个动画效果，鼠标移入会放大选中帖子，鼠标移出会恢复。
.DiscussionListItem {
transition: All 0.2s ease-in-out;
-webkit-transition: All 0.2s ease-in-out;
-moz-transition: All 0.2s ease-in-out;
-o-transition: All 0.2s ease-in-out;
}
.DiscussionListItem:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
}
但是当有第二个div存在的时候就会疯狂闪烁，就和这个视频一样：
🌟解决方案
然后我想了想，似乎单纯靠css没法解决，最后用js解决了。
用委托给"DiscussionListItem"类名的div加上mouseover和mouseout事件（jquery的hover事件也是根据这两个事件实现的），当下拉菜单被点开的时候就取消掉"DiscussionListItem"的动画。
并且当点击菜单按钮(Dropdown-toggle)的时候也判断一下下拉菜单的display，避免点出下拉菜单的时候被帖子的div覆盖。
使用效果参考本站🙄
代码如下：
<script>
/* 实现主题帖hover特效并且不影响下拉菜单 */
$(function() {
$("body").delegate(".Dropdown-toggle", 'click',
function() {
let menuState = $(".open .Dropdown-menu").css("display");
if (menuState == 'none' || menuState == undefined) {
$('.DiscussionListItem').css({
'transition': ' All 0.2s ease-in-out'
});
$('.DiscussionListItem').css({
'transform': ' none'
});
}
});
$("body").delegate(".DiscussionListItem", 'mouseover',
function() {
let menuState = $(".open .Dropdown-menu").css("display");
if (menuState == 'none' || menuState == undefined) {
$(this).css({
'transform': ' scale(1.05)'
});
$(this).css({
'transition': ' All 0.2s ease-in-out'
});
} else {
$(this).css({
'transition': ' All 0.2s ease-in-out'
});
$(this).css({
'transform': ' none'
});
}
});
$("body").delegate(".DiscussionListItem", 'mouseout',
function() {
let menuState = $(".open .Dropdown-menu").css("display");
if (menuState == 'none' || menuState == undefined) {
$(this).css({
'transition': ' All 0.2s ease-in-out'
});
$(this).css({
'transform': ' none'
});
} else {
$(this).css({
'transform': ' none'
});
}
});
});
</script>
如果是flarum程序想实现的话直接复制上面的代码粘贴到自定义页脚里即可。
