Problem mit Mouseter / Mousleave zurückgehaltenCSS

CSS verstehen
Anonymous
 Problem mit Mouseter / Mousleave zurückgehalten

Post by Anonymous »

Ich versuche, eine Benachrichtigung zu erstellen, die erscheint, wenn ich über das Bell -Symbol schwebe. Ich habe die Glocke und den Dropdown mit auffälligen Neoneffekten gestylt und sogar ein kleines unsichtbares .notifikations-Hover-Bridge-Element zwischen ihnen hinzugefügt, um zu verhindern, dass der Dropdown-Down-Down-Bereich verschwindet, wenn sich die Maus von der Glocke zum Dropdown bewegt. Wenn ich meine Maus von der Glocke in den Dropdown bewege, auch wenn ich schnell und vorsichtig gehe, löst sie ein Mouselave -Ereignis aus, bevor ich den Dropdown erreichen kann - also verschwindet sie. /> Ich brauche also eine Lösung, in der die Maus über diese unsichtbare Brücke wandern kann, ohne dass der Dropdown verschwindet-im Grunde genommen eine einheitliche Schwebezone, die den Dropdown sichtbar hält, solange ich irgendwo in diesem Bereich bin. (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>
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 !!!

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post