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

Ruby

Posted by Jacqueline Boltik
Jacqueline Boltik
Courses Plus Student 11,153 Points

CSS/Ruby Help - Ugly Black Boxes appearing over image out on hover out of nowhere

I'm working on a Ruby on Rails app. I was working on the database models/migrations and was not paying any attention to the shop page. Now when I visit that page I see an ugly black stripe appearing behind the image i'm hovering on.

Here's a link to my app: https://oolaabox.herokuapp.com/shop

It only happens on the shop page, and does not happen on any of the other pages in the application that contain images. My first thought is that the shop page contains some animation and that could be causing the issue. I've just been tinkering around with animations (which you can see only in chrome at this point). I'm not sure if this caused the problem since I worked on animations, then made the model updates and before I made the model updates the animations were fine.

Any idea what might be causing the problem? I checked in my css file but don't remember making any changes to it before this problem popped up.

I'm not sure where to look next...any ideas?

Jacqueline Boltik
Jacqueline Boltik
Courses Plus Student 11,153 Points

I just realized the black box appears behind the header logo everywhere in the application when I hover over the logo. I tried commenting out different part of my application.html.erb file but that did not work.

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

And nifty site you have going on there =)

2 Answers

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

So you have some CSS code that is making it happen. Here is the code:

a:hover {
  color: #fff;
  background-color: #000;
}

This applies to all links on your site. If this is meant for only a specific case, I would give those links a class for this specific hover and define this a:hover in a specific container.

For example, say it's the navigation that has the black background, then you want:

.navigation a:hover {
   color: #fff;
   background-color: #000;
}

Then this will only appear inside the navigation div.

Jacqueline Boltik
PLUS
Jacqueline Boltik
Courses Plus Student 11,153 Points
Jacqueline Boltik
Jacqueline Boltik
Courses Plus Student 11,153 Points

Brandon,

Thanks for your help - you were right on! When I generated a scaffold it also created some default css that included the problem hover code.

I have a ways to go with the website and appreciate the encouragement - glad the vision is starting to show through :)

Brandon Barrette
Brandon Barrette
20,485 Points
Brandon Barrette
Brandon Barrette
20,485 Points

So to fix this, you should have the scaffolds.css.scss file in your CSS folder, but delete everything inside of it so it's just a blank file.

Then next time you run a scaffold generator, it will ask you if you want to overwrite this file. You say NO and the file stays empty.

If you delete the file, the next time you run a scaffold generator, it will automatically regenerate that CSS file for you, causing this same headache.

Hope that makes sense!