CODEWITHSUNDEEP
htmlcss
Ryan Sayles
Ryan Sayles

Reputation: 3431

CSS Link hover style

I'm designing a webpage which has a menu bar with links on the page. I have a style sheet for it but I'm having trouble with the "hover" code. A piece of my code looks like:

<body>
<div id="wrapper">
    <div id="menu">
        <a class="mLink" href="main.php">Home</a>

With a css code: 

body {
background-color:black;
text-align: center;
height:100%;
}

div#wrapper{
margin-right: 5%;
margin-left: 5%;
margin-top: 0%;
margin-bottom: 5%;
border: outset;
border-color: white;
}

a.mLink{
color: white;
font-size: 35px;
padding: 10px;
}

a.mLink:hover{ 
color: black;
}

a.mLink:active{
color:black;
}


div#content{
color: white;
font-size: 40px;
}

The "hover" and "active" both aren't working and I don't understand why. I've tried a lot of different style variations such as a:hover, #menu a:hover, #menu a.mLink:hover, and nothing seems to work. Any help would be much appreciated.

Upvotes: 3

Views: 940

Answers (2)

Drakkainen
Drakkainen

Reputation: 1142

This may sound stupid, but clear the cache. It might be loading your previous version or something. Also what Web Browser is it? And is there any JS code that might dynamically change/add class.

Upvotes: 0

Ben
Ben

Reputation: 764

Perhaps you could include a screenshot of how it looks and tell us how it's supposed to look? I copied and pasted what you had into this jsfiddle and it works just fine to me. The only difference between what you posted and what I did was change the a:hover color to red and the a:active to yellow so you can see the difference instead of having black on black.

So can you post a screenshot of what's happening vs what you expect? If so, I'll update my answer accordingly.

Upvotes: 3

Related Questions