• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

a hover not working

Community Beginner ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

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.

Views

3.4K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Aug 07, 2018 Aug 07, 2018

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

Votes

Translate

Translate
LEGEND ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

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;

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

Got a link to the site?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 06, 2018 Aug 06, 2018

Copy link to clipboard

Copied

This works for me.

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<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>

<nav class="topnav">

<ul>

<li><a href="#">Some Link</a></li>

<li><a href="#">Some Link</a></li>

<li><a href="#">Some Link</a></li>

</ul>

</nav>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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>

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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">

<!--start Google analytics code-->
<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>

<!--end Google analytics code-->
</head>
<body>
  <div id="outer">
<div id="wrapper">
  <div id="logo">
   <img src="images/sitephotos/logo.jpg" alt="logo" />
  </div><!--logo-->
  <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><!--icon-->
  <div id="topnav">
   <ul>
    <li>Home</li>
    <li>Book</li>
    <li>Excerpt</li>
    <li>About</li>
    <li>Contact</li>
   </ul>
  </div><!--topnav-->
  <div id="banner">
   <img src="images/banner/banner1.jpg" alt="banner" />
  </div><!--banner-->
  <div id="content">
   <h2>Main Heading</h2>
   <p>placeholder</p>
  </div><!--contemnt-->
  <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><!--links-->
  <div id="bottomnav">
   <ul>
    <li>Home</li>
    <li>Book</li>
    <li>Excerpt</li>
    <li>About</li>
    <li>Contact</li>
   </ul>
  </div><!--bottomnav-->
  <div id="footer">
   <p>Copyright &copy; Dewan Jaglul. All rights reserved.</p>
  </div><!--footer-->
</div><!--wrapper-->
  </div><!--outer-->
</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;
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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.   

<a href="index.html">HOME</a>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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...

<div id="topnav">

   <ul>

    <li>Home</li>


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

<div id="topnav">

   <ul>

    <li><a href="index.html">Home</a></li>

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 07, 2018 Aug 07, 2018

Copy link to clipboard

Copied

LATEST

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines