Mouse hover not propagated through v-expansion-panel-title__overlay

[simenkf]

I use v-expansion-panel with v-cols in a v-expansion-panel-title to display data. Sometimes the strings in a column is too large to fit, so I have added CSS to handle how it is to be displayed. Now, I also want the user to be able to hover the mouse over a specific v-col to apply an alternative CSS (which will display the string accross multiple lines if needed).

In a Vue 2.x app I have successfully done this. However, in Vue 3 I experence that the hover event is not propagated past v-expansion-panel-title__overlay. That is, each panel title gets a shadow-like color when it is hovered. The v-cols behind it does not receive the hover event. If I inspect the html and delete the v-expansion-panel-title__overlay, my CSS is working as expected.

The CSS I have used looks like this:

<style scoped>
.v-row .v-col {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.v-row .v-col:hover {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
</style>

So, my question is; how can I make the hover event reach my v-col?

I'm using Vue 3.3.4 and Vuetify 3.3.15. Like I said, this works straight out of the box on Vue 2 because there are no shadow effect (i.e. no __overlay) for panels there.

[KaelWD]

.v-expansion-panel-title__overlay { pointer-events: none }

[simenkf]

Thanks a lot! I also had to use the deep selector, so the following worked:

.v-expansion-panel-title :deep(.v-expansion-panel-title__overlay) {
  pointer-events: none;
}

[sbernard31]

I faced exactly same issue and it this helps a lot. thx 🙏

@KaelWD why this is not the default behavior ?