diff --git a/changelog/unreleased/enhancement-hover-in-oc-drop-menues b/changelog/unreleased/enhancement-hover-in-oc-drop-menues
new file mode 100644
index 000000000..4e8d79def
--- /dev/null
+++ b/changelog/unreleased/enhancement-hover-in-oc-drop-menues
@@ -0,0 +1,5 @@
+Enhancement: Hover in ocDrop menues
+
+We've added the "oc-menu-item-hover" class for
elements inside ocDrop, to add the hover effect on buttons and links.
+
+https://github.com/owncloud/owncloud-design-system/pull/2069
diff --git a/src/components/atoms/OcDrop/OcDrop.vue b/src/components/atoms/OcDrop/OcDrop.vue
index 7b1b6403f..6d75457cd 100644
--- a/src/components/atoms/OcDrop/OcDrop.vue
+++ b/src/components/atoms/OcDrop/OcDrop.vue
@@ -208,6 +208,27 @@ export default {
// note: needed so that the box shadow from `oc-box-shadow-medium` doesn't get suppressed
padding: 8px;
}
+ li.oc-menu-item-hover {
+ a,
+ button:not([role="switch"]) {
+ box-sizing: border-box;
+ padding: var(--oc-space-small);
+ color: var(--oc-color-swatch-passive-default);
+ &:focus,
+ &:hover {
+ background-color: var(--oc-color-background-hover);
+
+ text-decoration: none !important;
+ border-radius: 5px;
+ }
+ &:hover span {
+ color: var(--oc-color-swatch-brand-hover) !important;
+ }
+ span {
+ text-decoration: none !important;
+ }
+ }
+ }
}
.oc-drop {
diff --git a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
index bfaf840ee..1165d1f4f 100644
--- a/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
+++ b/src/components/molecules/OcBreadcrumb/OcBreadcrumb.vue
@@ -183,10 +183,6 @@ export default {
#oc-breadcrumb-contextmenu-trigger > span {
vertical-align: middle;
border: 3px solid transparent;
- &:hover {
- background-color: var(--oc-color-background-hover);
- border-radius: 5px;
- }
}
#oc-breadcrumb-contextmenu li button {
diff --git a/src/components/molecules/OcTable/OcTable.vue b/src/components/molecules/OcTable/OcTable.vue
index aec1b35aa..d28690031 100644
--- a/src/components/molecules/OcTable/OcTable.vue
+++ b/src/components/molecules/OcTable/OcTable.vue
@@ -472,7 +472,7 @@ export default {
transition: background-color $transition-duration-short ease-in-out;
}
- &-hover tr:hover span:not(.avatarInitials):not(button span) {
+ &-hover tr:hover td:not(:last-child) span:not(.avatarInitials):not(button span) {
color: var(--oc-color-swatch-brand-hover) !important;
}