a hover not working

Report · Aug 06, 2018

What I am doing wrong. This has worked everytime. Not this time though. Checked online, no errors.

At the head section, I have declared the properties:for a

a { text-decoration:none; }

a:link { color:#000000; }

a:visited { color:#000000; }

a:active { color:coral; }

a:focus { color:coral; }

a:hover { color:coral; }

At the individual div level:

#topnav {
font-size: 18px;
border-top: 2px #333 solid;
border-bottom: 2px #333 solid;
margin: 10px 0;
padding: 5px 10px;
}

#topnav ul li {display: inline; padding: 5px 15px;}

#topnav ul li:hover { background-color: #333;}

#topnav ul li:hover a { color:coral; }

The background color changes but not the font color on hover, active of focus.

Report · Aug 06, 2018

Check that there is actually a color named coral would be my initial thoughts.......as a test replace it with red and see if it works.

The css below should work without the necessity to include ul li:

#topnav a:hover {

color: coral;

}

Report · Aug 06, 2018

I tried with other colors as well as without ul li. This code works for three other sites I have built but for some reason not for this one.

Report · Aug 06, 2018

Got a link to the site?

Report · Aug 06, 2018

This works for me.

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

<style>

.topnav a { text-decoration: none; }

.topnav a:link, .topnav a:visited { color: #000; }

.topnav a:hover, .topnav a:active, .topnav a:focus {

color: coral;

background: #333

}

</style>

</head>

<body>

<ul>

</ul>

</nav>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 07, 2018

Your code as written above works fine, if your html structure matches what you're trying to target with the css.

Could you share your actual HTML so we can see where the mismatch is between your html structure and your css selectors?

Report · Aug 07, 2018

As I have already mentioned, the code works in three other websites I had built on DW. I cannot understand why It won’t work this time. Here is the html code that pertains to the topnav.

Book
Excerpt
About
Contact

<!~~topnav~~>

Report · Aug 07, 2018

Don't send code via email reply, it doesn't come through in the forum.

Use a web browser so you can copy/paste the code here, or post a link to your work in progress.

Report · Aug 07, 2018

If you can't post a link, post the entire code, not just the code snippet from the navigation.

Something in your code isn't right, and it may not appear as though it pertains to your navigation, but can still affect it, so it's best if we can see everything in order to give you the fastest answer to your issue.

Report · Aug 07, 2018

Here is the html code followed by CSS code. Just to add. the background color changes on hover to 333on for the topnav (or bottomnav, which essentially is the same), however, the font color does not change from black to coral and that is the problem. I have tried other colors. I never had a problem with code like this before.

<!doctype html>
<html>

<head>
<meta charset="utf-8">
<title>The Enigmatic Brain Reveals</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen">


<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i=i||function(){
(i.q=i.q||[]).push(arguments)},i.l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-70459726-1)', 'auto');
ga('send', 'pageview');

</script>

</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="logo">
   <img src="images/sitephotos/logo.jpg" alt="logo" />
</div>
<div id="icon">
   <ul>
    <li><img src="images/sitephotos/link2.png" alt "photography site" /></li>
    <li><img src="images/sitephotos/link1.png" alt="book site" /></li>
   </ul>
</div>
<div id="topnav">
   <ul>
    <li>Home</li>
    <li>Book</li>
    <li>Excerpt</li>
    <li>About</li>
    <li>Contact</li>
   </ul>
</div>
<div id="banner">
   <img src="images/banner/banner1.jpg" alt="banner" />
</div>
<div id="content">
   <h2>Main Heading</h2>
   <p>placeholder</p>
</div>
<div id="links">
   <ul>
    <li><img src="images/sitephotos/button2.png" alt="link" /></li>
    <li><img src="images/sitephotos/button1.png" alt="link" /></li>
   </ul>

</div>
<div id="bottomnav">
   <ul>
    <li>Home</li>
    <li>Book</li>
    <li>Excerpt</li>
    <li>About</li>
    <li>Contact</li>
   </ul>
</div>
<div id="footer">
   <p>Copyright © Dewan Jaglul. All rights reserved.</p>
</div>
</div>
</div>
</body>
</html>

/* CSS Document */

* {margin: 0px; padding: 0px; border: 0px; }
body {
font-family: "Arial", "Cambria", "Candara", "Hoefler Text", "Liberation Serif", "serif", "Tahoma", "Times", "Times New Roman" ;
color: black;
}
html {
background-image: url(../images/sitephotos/background.jpg);
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}

a { text-decoration:none; }
a:link { color:#000000; }
a:visited { color:#000000; }
a:active { color:coral; }
a:focus { color:coral; }
a:hover { color:coral; }

/* text elements*/

h2 { margin-bottom: 10px; }

p { margin-bottom: 10px;
line-height: 150%;
}

/* containers*/
#outer {
width:1044px;
margin: auto;
background-color:#333;
padding: 10px 0;
}
#wrapper {
width:990px;
background-color:coral; }
#wrapper { margin: 8px auto; }

#logo {
overflow: hidden; }

#icon {
margin: 20px;
padding: 10px;
border: 5px coral solid;
}

#icon ul li {display: inline; padding: 0px 10px;}

#topnav {
font-size: 18px;
border-top: 2px #333 solid;
border-bottom: 2px #333 solid;
margin: 10px 0;
padding: 5px 10px;
}

#topnav ul li {display: inline; padding: 5px 15px;}

#topnav ul li:hover { background-color: #333;}

#topnav ul li:hover a { color:red; }

#banner {
width: 980px;
height: 326px;
margin: 0 auto;
overflow: hidden;
}

#content {
padding: 10px;
}

#links {
margin: 20px;
padding: 10px;
border: 5px coral solid;
}

#links ul li {display: inline; padding: 0 53px;}

#bottomnav {
font-size: 18px;
border-top: 2px #333 solid;
border-bottom: 2px #333 solid;
margin: 10px 0;
padding: 5px 10px;
}
#bottomnav ul li {display: inline; padding: 5px 15px;}

#bottomnav ul li:hover { background-color: #333;}

#bottomnav ul li:hover a: { color: coral}

#footer {
border-top: 2px #333 solid;
}
#footer p {
text-align: center;
font-style: italic;
padding: 10px 0;
}

Report · Aug 07, 2018

You have no <a> tags in your menus, your selectors won't work until they're added in.

Report · Aug 07, 2018

Can be a little more specific, like give an example. I don't see what I am doing different this time. Without establishing the links. the color changes of on hover but not the font color, which got me confused. Sorry for the trouble.

Report · Aug 07, 2018

Until you add some hyperlinks to your topnav, the CSS pseudo classes will do nothing because it's not linked text. It's ordinary text.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Aug 07, 2018

Dewan9598 wrote
Without establishing the links. the color changes of on hover but not the font color, which got me confused. Sorry for the trouble.

Right now, you are trying to select <a> tags with your css, but you haven't actually added any to your html yet. For example, your code...

#topnav ul li:hover a { color:red; }

As written, the above is meant to target the contents of an <a> tag, inside a <li> that's being hovered over with a mouse pointer, inside a <ul>, inside an element with id="topnav". There's no <a> tag in your html...

<ul>

You need to add links around your text inside your <li> tags for that line of css to do something...

<ul>

Once you add your actual links, the text will light up as expected.

Report · Aug 07, 2018

Ok thanks will add those hyperlinks when I get to that point. If it works fine. If not will reach out to you again. Thanks for your support. You all are awesome.

Report · Aug 07, 2018

Hi Mr Jon Fitz and Ms Nancy Oshea,

I was worrying for no reason. Thanks for pointing out that the process was not there yet. Now that I have established the a link to the menu, as you have suggested, it is working fine. Thanks for your support.

a hover not working

1 Correct answer