show code copy button only on code block interaction

[hellt]

Hi all,
I am dealing with long configuration lines in my code blocks. By default code copy and code selection buttons make it hard to read the ending of a string in a code block.

I was looking for a way to have an empty first string to make sure the icons are not overlayed on the text but couldn't find a way.
So I am looking now to a set of css rules to make icons not visible until I hover over the code block or put it in focus.

Does anyone have suggestions how to do that? Thanks!

[hellt]

For now I did it with

/* START hide code copy and selection icons until on hover */
/* Hide the nav element by default */
div.highlight .md-code__nav {
  display: none;
}

/* Show the nav element when the div is hovered over */
div.highlight:hover .md-code__nav {
  display: flex;
}

/* END hide code copy and selection icons until on hover */

Does the job, but maybe what would be nicer is to have a listener to hide the buttons when mouse stands still over the code blocks for X seconds...