Question

Can you have a look at my code and please tell me why the hover is not working, thanks!

<style>
 #moreDiscussHome:hover{
           background-color: #ffffff;
}

</style>
<a id="moreDiscussHome" style="color:#f1f7f8;background-color:#12a1b7;" href="">more discussions</a>

Answer 1

Well, as soon as display: none; is applied, you are no longer hovering the element because it is not there, so it will basically flicker constantly or do nothing.

Try opacity* instead perhaps:

#moreDiscussHome:hover {
    opcaity: 0;
}

Note that the element still retains it’s space in the layout with this, which may not be what you want… but I’m honestly not sure what you’re trying to achieve with this.

Side note: There’s no reason not to move those other inline styles to a stylesheet.

This doesn’t work: #moreDiscussHome:hover{ background-color: #ffffff; }

EDIT: I strongly urge you to move all inline styles to a CSS file. If for no other reason, to avoid some of the issues you already seem to be having with trying to apply background colors. A shortcut might seem easier at the time, but as the saying goes: “Shortcuts make for long delays”. (In other words, don’t do it)

_{* visibility:hidden will respond to :hover the same as display:none, so it won’t work either. Thanks to thirtydot for the tip.}