[Resolved] Link background on hover

[ammgbr]

Hello I am suing the following CSS for link background on hover:

.entry-content a:hover{
background-color: #3C4043;
}

It does not appear to work on desktop despite clearing server and CDN cache. On preview it works when on mobile version.

Also, how could I have the background hover extend the full width of that line as opposed to just the link length?

[Fernando]

Hello there,

It seems that your CSS code has a syntax error which is why the code isn’t working. There’s a missing } Specifically this part:

@media (max-width: 768px) {
    div#primary-menu {
        margin-top: 5px;
        border-top: 2px solid #5F6368;
        border-bottom: 2px solid #5F6368;
        width: 100%;
    }
    .entry-content a:hover {
        background-color: #3C4043;
    }

Should it be something like this?

@media (max-width: 768px) {
    div#primary-menu {
        margin-top: 5px;
        border-top: 2px solid #5F6368;
        border-bottom: 2px solid #5F6368;
        width: 100%;
    }
}
    .entry-content a:hover {
        background-color: #3C4043;
    }

Kindly let us know.

[ammgbr]

Thank you for spotting that, it now works!

Is there a css modification to to have the hover effect over the entire length of the line and not just over the text?

[Ying]

The block you are using set the container to inline-block which will not go full width.

This CSS should override the CSS from the block, give it a try:

.gutentor-element-list ul:not(.list-indicator-image):not(.list-indicator-icon) li span {
    display: block;
}
.gutentor-element-list ul:not(.list-indicator-image):not(.list-indicator-icon) li span p {
    display: flex;
    flex-direction: column;
}

You’ll see gaps between lines, that’s the <br> elements.

[ammgbr]

Many thanks

[Ying]

No problem 🙂

[Author]

Posts