Проблема с мышком / муслевом ⇐ CSS

[Anonymous]

Я пытаюсь построить выпадающую сторону уведомлений, который появляется, когда я наводняю на значок колокола. Я стилизовал колокол и раскрывающуюся спину с яркими неоновыми эффектами, и я даже добавил небольшой невидимый элемент. Нотификационный мост-мост между ними, чтобы предотвратить выпадение от исчезновения, когда мышь перемещается из колокола к раскрывающемуся спине. Когда я перемещаю свою мышь из колокола в выпадающую сторону, даже если я иду быстро и осторожно, она запускает событие мышца, прежде чем я смогу достичь выпадения - так что оно исчезает. Сам. (mouseenter)="showDropdown = true"
(mouseleave)="showDropdown = false">



{{ getUnreadCount() }}

• 0">
  Notifications
  Mark All as Read
• 
  {{ n.message }}
  
  {{ n.message }}
  Mark as Read
• No notifications yet!

My Shit

< /code>
и < /p>
.notification-wrapper {
position: relative;
display: inline-block;
z-index: 1000; // ensures it's above other elements if needed
}

.notification-bell {
position: relative;
display: inline-block;
font-size: 1.5rem;
color: #ff0;
cursor: pointer;
text-shadow: 0 0 10px #ff0, 0 0 20px #ff0;
transition: transform 0.2s ease-in-out;

&:hover {
transform: scale(1.1);
}

&::after {
content: attr(data-count);
position: absolute;
top: -8px;
right: -12px;
background-color: #f00;
color: white;
font-size: 0.7rem;
font-weight: bold;
padding: 4px 6px;
border-radius: 50%;
box-shadow: 0 0 10px #f00, 0 0 20px #f00;
z-index: 10;
}

.notification-hover-bridge {
position: absolute;
pointer-events: auto;
top: 100%;
left: 0;
width: 100%;
height: 12px; // tweak as needed
z-index: 999;
}

.notifications-dropdown {
display: none;
position: absolute;
top: calc(100% + 2px);
left: 50%;
transform: translate(-50%);
width: 300px;
max-height: 400px;
overflow-y: auto;
background: #1a1a1a;
border: 2px solid #ff00ff;
border-radius: 10px;
padding: 0px;
margin-top: 0px;
list-style: none;
z-index: 1001;
box-shadow: 0 0 20px #ff00ff, 0 0 30px #ff00ff;

.mark-all-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #2a2a2a;
border-bottom: 2px solid #ff00ff;
color: #ff0;
font-weight: bold;
font-size: 1rem;
text-shadow: 0 0 10px #ff0;

button {
background: none;
border: 1px solid #ff0;
color: #ff0;
padding: 4px 10px;
font-size: 0.75rem;
border-radius: 5px;
text-shadow: 0 0 5px #ff0;
box-shadow: 0 0 10px #ff0;
cursor: pointer;
transition: all 0.3s ease;

&:hover {
background-color: #ff0;
color: #121212;
box-shadow: 0 0 20px #ff0, 0 0 40px #ff0;
}
}
}

li {
padding: 10px 16px;
border-bottom: 1px solid #333;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
color: #fff;
text-shadow: 0 0 5px #0f0;
transition: background-color 0.3s;

&:hover {
background-color: #2a2a2a;
}

button {
background: none;
border: 1px solid #0ff;
padding: 4px 8px;
color: #0ff;
border-radius: 6px;
font-size: 0.75rem;
cursor: pointer;
text-shadow: 0 0 5px #0ff;
box-shadow: 0 0 10px #0ff;
transition: all 0.3s ease;

&:hover {
background-color: #0ff;
color: #121212;
box-shadow: 0 0 20px #0ff, 0 0 40px #0ff;
}
}
}

li:last-child {
border-bottom: none;
}
}

&:hover .notifications-dropdown {
display: block;
}
}
< /code>
По какой -то причине раскрывающийся список продолжает исчезать, прежде чем мышь сможет добраться до нее (от колокола). Я попытался добавить невидимый Div, обертку и играть с позициями. Ничего не работает !!!

Подробнее здесь: https://stackoverflow.com/questions/795 ... mouseleave