Once you apply display: none;
, the element no longer responds to hover, causing it to flicker or do nothing.
You might want to consider using opacity instead:
#moreDiscussHome:hover {
opcaity: 0;
}
Keep in mind that with this method, the element still takes up space in the layout, which may not be desired. It's unclear what your end goal is here.
On a side note, it would be beneficial to move those inline styles to a separate stylesheet.
Attempting to change the background color on hover like this won't work: #moreDiscussHome:hover{ background-color: #ffffff; }
EDIT: I strongly advise moving all inline styles to a CSS file. This will help avoid issues, such as the one you're experiencing with applying background colors. Taking shortcuts may seem easier, but remember: "Shortcuts make for long delays." (In other words, don't do it)
* Using visibility:hidden
instead of display:none
won't respond to :hover
either. Thanks to thirtydot for pointing this out.