Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Halyna Buriachenko
PLUS
Halyna Buriachenko
Courses Plus Student 1,868 Points
Posted by Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

Lost mouse on (hoover) when pointing on the links

I had the mouse on when pointed on the links but after setting display inline-block I lost this ability. Can't see my mouse on any links in my page right now:(

Steven Parker
Steven Parker
229,786 Points
Steven Parker
Steven Parker
229,786 Points

To facilitate analysis of your issue, make a snapshot of your workspace and post the link to it here.

A link to the course page you are working with would be helpful also.

Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points
Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

Thank you for the answer. Here is link for video and my code. https://teamtreehouse.com/library/how-to-make-a-website/styling-web-pages-and-navigation/build-navigation-with-unordered-lists

/**************************
GENERAL
**************************/

a{
  text-decoration: none;
  color: #4d1a00;
}

body{
  background-color: #fff;
  color: #808080;
  font-family: 'Indie Flower', cursive;
}

#wrapper{
  max-width: 940px;
  margin: 0 auto;;
  padding: 0 5%;
}

img{
  max-width: 100%;
}

/**************************
HEADING
**************************/

header{
  float:left;
  margin:0 0 30px 0;
  padding: 5px 0 0 0;
  width:100%;
}

#logo{
  text-align:center;
  margin:0;
}

h1, h2 {
  color: #fff;
}

h1{
  font-family: 'Merriweather', serif;
  margin: 15px, 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 1.5em;
}

h2{
  font-family: 'Merriweather', serif;
  font-size: 1.3em;
  margin: 5px 0 0;
  font-weight:normal;
}


/***********************
Colors
***********************/

header{
  background: #ffcc66;
  border-color: #ffd480;
}

nav {
  background-color: #ffd480;
}

nav a, nav a:visited {
  color:#fff;
}

nav a.selected, nav a:hover{
  color: #4d1a00;
}



/**************************
Navigation
**************************/

nav {
  text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}

nav ul{
  list-style: none;
  margin:0 10px;
  padding:0;
}

nav li{
  display: inline-block;
}

nav a{
  font-weight:800;
  padding:15px 10px;
}

/**************************
Page:Portfolio
**************************/

#gallery{
  margin:0;
  padding:0;
  list-style: none;
}

#gallery li{
  float:left;
  width:45%;
  margin:2.5%;
  background-color:#f5f5f5;
}

#gallery li a p{
  margin:0;
  padding: 5%;
  font-size:0.82em;
}



/**************************
FOOTER
**************************/

footer{
  text-align: center;
  font-size: 0.75em;
  padding-top:50px;
  color: #ccc;
  font-family: 'Merriweather', serif;
  clear:both;
}
Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points
Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points 
<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <title>Halyna Buriachenko |Web-designer</title>
   <link rel="stylesheet" href="css/reset.css">
   <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Merriweather:700|Oxygen:700" rel="stylesheet">
   <link rel="stylesheet" href="css/main.css">
  </head>
 <body>
    <header>
      <a href="index.html" id="logo">
       <h1>Halyna Buriachenko</h1>
       <h2>Web-designer</h2>
      </a>
     <nav>
      <ul>
        <li><a href="index.html" class="selected">Portfolio</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
     </nav>
    </header>
   <div id="wrapper">
    <section>
       <ul id="gallery">
        <li>
         <a href="img/numbers-01.jpg">
           <img src="img/numbers-01.jpg" alt"">
            <p>Experimentation with colors and texture.</p>
         </a>
        </li>
        <li>
         <a href="img/numbers-02.jpg">
           <img src="img/numbers-02.jpg" alt"">
            <p>Playing with blending modes in Photoshop.</p>
         </a>
        </li>
        <li>
         <a href="img/numbers-06.jpg">
          <img src="img/numbers-06.jpg" alt"">
           <p>Trying to create an 80's style of glows.</p>
         </a>
        </li>
        <li>
         <a href="img/numbers-09.jpg">
          <img src="img/numbers-09.jpg" alt"">
           <p>Drips created using photoshop brushes.</p>
         </a>
        </li>
        <li>
         <a href="img/numbers-12.jpg">
          <img src="img/numbers-12.jpg" alt"">
           <p>Creating shapes usind repetition.</p>
         </a>
        </li>
       </ul>
    </section>
    <footer>
      <a href="http://twitter.com/HeilySweet"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/galina.buryachenko"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2017 Halyna Buriachenko.</p>
    </footer>
     </div>
 </body>
</html>

2 Answers

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

So when you add:

nav li {
  display: inline-block;
}

your mouse cursor disappears when you are hovering over links? Or do you mean that the color property isn't changing as you defined for the hover state?

If you remove or comment out the inline-block section, does it fix the problem? I tried your code and it seemed to work as expected for me and I could see the mouse pointer as well as the changed color when hovering over links, but perhaps I'm not understanding the problem correctly.

You may need to do as Steven suggested and create a snapshot of your exact workspace environment so peers can replicate the problem.

Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points
Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

Thank you for the answer. After I restarted my laptop it worked out somehow. And now everything is all right;) Thanks for the feedback!

Steven Parker
Steven Parker
229,786 Points
Steven Parker
Steven Parker
229,786 Points

I am also unable to replicate the problem.

I would point out that it's normal for the cursor to change as you pass over a link. Most browsers show the new cursor as a hand with an extended finger. If for some reason this image was not available in the browser, that might cause the cursor to vanish.

You might try a different browser, or perhaps even rebooting your computer to possibly reset some mysterious internal issue.

Steven Parker
Steven Parker
229,786 Points
Steven Parker
Steven Parker
229,786 Points

Aha! So that was it! Let me guess - Windows machine? Always remember the Windows motto:

When all else fails, reboot! :laughing:

Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points
Halyna Buriachenko
Halyna Buriachenko
Courses Plus Student 1,868 Points

Lol! Thanks! I'll remember that:) I am on my way of getting Mac though. I hope I'll not have such problems anymore:)