Highlighting latest music

[arrbee99 1815]

Any thoughts on highlighting items in this top row please -

the only thing I could find that might affect just that row is this vibrant thing -

div.cardBox.visualCardBox.visualCardBox-vibrant.cardBox-touchzoom

so as to highlight when hovering with mouse or selecting via keyboard. Have played with :before and :focus and :hover and...nothing.

[Happy2Play 9780]

4 hours ago, arrbee99 said:

Any thoughts on highlighting items in this top row please -

the only thing I could find that might affect just that row is this vibrant thing -

div.cardBox.visualCardBox.visualCardBox-vibrant.cardBox-touchzoom

so as to highlight when hovering with mouse or selecting via keyboard. Have played with :before and :focus and :hover and...nothing.

For focus/keyboard select did you look at the existing :before?  I just copied it to needed level.

existing code

Added and edited to different element (adjusted color and border-width)  

div.card:focus-visible div.cardBox::before
 {
    content: " ";
    position: absolute;
    top: -.34em;
    left: -.34em;
    right: -.34em;
    bottom: -.34em;
    border-width: .5em;
    border-style: solid;
    border-radius: .6em;
	z-index: 1;
    border-color: red;
}

As for hover 

div.card-hoverable div.cardBox:hover
 {
    top: -.34em;
    left: -.34em;
    right: -.34em;
    bottom: -.34em;
    border-width: .5em;
    border-style: solid;
    border-radius: .6em;
	z-index: 1;
	border-color: red;
}

Focus will need more tweaking as you see the border differences.  Along with limiting code if you only want in specific areas.  

Looks like Music acts a little different than other areas though.

[arrbee99 1815]

Thank you, I shall have a play with that. Didn't spot that existing before though.