Archived topic
Link background on hover
5 replies · Started by ammgbr on June 21, 2022
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?
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.
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?
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.
Many thanks
No problem :)
