How to disable "gradient highlighting" when hovering over dataview lists?

[omortazavi]

Hey folks, first post here

What I’m trying to do

I like to categorize my task in bullet points, with more granular categories being under less granular ones.

I’m using dataview to filter tasks I’ve written in this format.

It works fine, but I find it pretty annoying that it highlights the tasks in this “gradient” way when I hover over them.

Here, I’m hovering over the Talk to brother task, but it’s highlighting all the tasks above it in the higherachy as well:

I’d very much prefer it if it just highlighted the task that I’m hovering directly over.
Is there an easy way to force this behavior?

Things I have tried

Tried inspecting element to see if I can figure out what CSS rules may be leading to this.
But I’m very new to CSS, so I couldn’t figure it out on my own.

[ariehen]

What does the raw Markdown look like as written in your note? Also, what theme (if any) are you using?

[omortazavi]

The markdown looks like this:

 - #personal
	- Social
		- Family
 			- [ ] Talk to brother #p1

I’m using the default theme

[ariehen]

Adjusting the spacing a bit (the above pasted a bit odd for me)

  - #personal
	- Social
		- Family
			- [ ] Talk to brother #p1

You mentioned Dataview; what is the query rendering the list in your screenshot? Dataview has some styling with its results, but I haven’t see this before.

Do you have any plugins installed that could be adding that gradient to your nested lists or queries?

I’d try in in Restricted mode (with a restart) and no CSS snippets enabled (if you have any). Other troubleshooting steps to try.

[omortazavi]

I created a completely new vault, installed only the Dataview plugin, and tried it there.
I see the same thing.

My brand new vault with only dataview installed

The contents of the file:

Me hovering over the Talk to brother #p1 bullet point after the dataview results are rendered:

Based on this, I think we can conclude this is not due to the my particular vault setup?
It should be reproducible on any vault.

[omortazavi]

To be fully clear:
This “gradient highlighting” does not show up when I hover over the original tasks themselves.
It shows up when I hover over the tasks/lists rendered by the dataview plugin.

[ariehen]

Got it! The mysteries of dataviewjs.

Hopefully a Dataview guru can weigh in.

---

In the meantime, I had a look at the CSS frozen when hovered:

This CSS snippet removes most of the hover business. I have to run at the moment, but will have a look later at removing the rest of it.

.dataview.task-list-item:hover, .dataview.task-list-basic-item:hover {
    background-color: unset;
    box-shadow: -40px 0 0 unset;
    cursor: pointer;
}

https://help.obsidian.md/Extending+Obsidian/CSS+snippets

[ariehen]

Give this a try:

.dataview.task-list-item:hover,
.dataview.task-list-basic-item:hover,
.table-view-table > tbody > tr:hover {
    background-color: unset;
    box-shadow: unset; 
}