(mouseleave)="showDropdown = false">
- 0">
Notifications
Mark All as Read -
{{ n.message }}
{{ n.message }}
Mark as Read - No notifications yet!
< /code>
und < /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>
Aus irgendeinem Grund verschwindet die Dropdown immer wieder, bevor die Maus (aus der Glocke) zu ihm gelangen kann. Ich habe versucht, die unsichtbare DIV, einen Wrapper hinzuzufügen und mit den Positionen zu spielen. Nichts funktioniert !!!