Having trouble with my CSS hover not functioning properly

I need some help with my code. Can you please take a look and let me know why the hover effect is not working? Thank you!

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

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

Answer №1

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to ensure that the ul navigation bar spans the entire bottom of the page evenly (without resorting to using table

This question has been previously raised on Stack Overflow with an insightful answer provided. However, I am encountering a specific problem in implementing it. My objective is to have a navigation bar (nav consisting of ul and its li items) occupy the en ...

What method can I use to replace the status bar from the top?

Is there a way to smoothly slide in and out a <View/> on React Native iOS, similar to the animation sequences shown in the images below? ...

Placing a picture within a box that is 100% of the viewport height

After searching for a while, I still haven't found a solution to my problem. I am currently working on a Personal portfolio that has different sections with a height of 100vh each. However, I am facing difficulty in positioning the images within the s ...

What is the best method to keep content confined within a box inside the grid, while also allowing the box to extend beyond the grid boundaries?

Apologies for the confusing title, but I must confess that I am unsure if there are more appropriate terms to explain what I am attempting to achieve. To provide clarity, I have included an image (as they say, a picture is worth a thousand words) https:// ...

The values are not being displayed in the local storage checkbox

I attempted to transfer checkbox values to another HTML page using local storage, however they were not appearing on the other page Here is my page1 HTML code snippet: <input class="checkbox" type="checkbox" id="option1" name="car1" value="BMW"> ...

Adjust the position of an unordered list element in CSS to move it lower on

I have a ul element in my navigation bar at the top of the webpage that I want to adjust slightly downwards. Take a look at the current navigation bar: image To align the text with the white bar at the top of the page, I need to move it down just a bit. ...

The modal dialog feature in HTML5 and CSS3 seems to be experiencing some issues when used in Opera browser

This informative post provides a detailed tutorial on creating a modal dialog using only HTML and CSS3. For more information, visit: To see a working demo, click here: The modal works flawlessly in most browsers, but some users have reported issues with ...

Steps to gather all the images within a directory

Take a look at this demo When you click on the "next" button, new images are loaded from the internet. In my application, all the images are stored in the img/image folder with names like 1.jpg, hi.png, etc. My question is, how can I display these image ...

The POST request did not yield an HttpResponse object; instead, it returned None

When I submit a selection from a dropdown form to views as a POST request, and then use this selection to query data from Django, I encounter an issue while trying to map Django models data to Highcharts following this approach. The error message "the view ...

How can you automatically adjust the height of a div to be 100% of its parent while maintaining top and bottom margins

http://jsfiddle.net/YumHS/ The page showcased in the provided jsfiddle link includes a sidebar within the content div. <section class="cont"> <div class="sidebar"> <ul> <li> ...

Avoid auto-scaling of div content

I need the .content within the main container .box to resize proportionally to match the width of the .box exactly, without being smaller. .box { width: 95%; background-color: red; padding: 20px; text-align: center; margin: 55px auto 40px; } . ...

Ways to reveal concealed div elements when hovering the mouse?

Is there a way to display a group of hidden div's when hovering over them? For instance: <div id="div1">Div 1 Content</div> <div id="div2">Div 2 Content</div> <div id="div3">Div 3 Content</div> All div's sho ...

How can I enable two-finger scrolling on mobile web browsers?

I am currently tackling a project that involves dragging operations on a canvas, making scrolling with a single finger impractical. My goal is to enable scrolling using two fingers instead. After testing different touch-action values, I discovered that pi ...

The largest contentful paint is anticipating an unidentified event

My website is encountering issues with Google Pagespeed and I'm unsure of the cause. The primary bottleneck appears to be the LCP time, which Google reports as taking between 7 and 11 seconds during each test. Upon analyzing the waterfall chart, it ...

What is the best way to deactivate a hyperlink on a widget sourced from a different website?

Is there a way to remove the link from the widget I embedded on my website without access to other editing tools besides the HTML code provided? For instance, we have a Trustpilot widget at the bottom of our page that directs users to Trustpilot's web ...

How can I use HTML code to style the header cell values of a table?

Can someone please assist me with creating a table header style that looks like the one in the image? Additionally, how can I turn the name and picture area into a block and add borders to them? I'm also having trouble with my list icons showing up a ...

Improve the way you manage the active selection of a button

ts isDayClicked: { [key: number]: boolean } = {}; constructor() { } setSelectedDay(day: string, index: number): void { switch (index) { case 0: this.isDayClicked[0] = true; this.isDayClicked[1] = false; this.isDay ...

Drop and drag the spotlight

On my website, I am looking to implement a feature that will make it easier for users to identify the drag and drop area. I found a code snippet on JSFIDDLE that works perfectly there. However, when I tried to use it on my local server, it doesn't se ...

Turn on and off scrolling of DIV content when hovering over it

How can I create a div that automatically scrolls to the bottom on hover? I tried implementing the code below, but it doesn't work as expected. It jumps to the bottom of the div's height on first hover and transitions smoothly on second hover. . ...

Should pages be indexed to index.php or should the top and bottom parts of the page be created and included in all content pages?

I've been out of the webpage creation game for a while, but I've recently decided to get back into it. Like everyone else, I want to learn the best way to do this. However, I find myself facing a dilemma on how to structure my pages. My initial i ...