CSS .class:hover doesn't work

Hey Guys,
i'm new to this forum, I hope to get some help here. I don't know what else I should do to make my code work, so I try to ask my question here.

I want to make something like that: I've got a <div> box with an image in it. And on mousehover on that image a button should be visible to klick on it. So far i've searched for some help online and got a solution that should work in my opinion.

First: Something like


CSS:

.box { background: #000000; }
.box:hover { background: #333333; }

HTML:

<div class = "box">
</div>


works perfect.

But here is my code that doesn't work:


CSS:

.viewAllHover {
padding: 1px 10px 3px 8px;
position: relative;
height: 23px;
line-height: 25px;
display: none;
margin: 0 auto;
color: #fff;
font-size: 11px;
text-transform: uppercase;
text-decoration: none;
}

a.viewAllHover {
background: #ec6105 url("../../images/link-bg.png");
background: -moz-linear-gradient(#ff8604, #ec6105);
background: -ms-linear-gradient(#ff8604, #ec6105);
background: -webkit-gradient(linear, left top, left bottom, from(#ff8604), to(#ec6105));
background: -webkit-linear-gradient(#ff8604, #ec6105);
background: -o-linear-gradient(#ff8604, #ec6105);
background: linear-gradient(#ff8604, #ec6105);
}

a.viewAllHover:hover {
text-decoration: none;
color: #0988F1;
}

a.viewAllHover span {
padding-left: 25px;
font-weight: 700;
display: inline-block;
line-height: 20px;
background: url(../../images/plus.png) no-repeat 0 0px;
text-shadow: 0px -1px 0px #ac5403;
}

.categorybox {
width: 920px;
height: 239px;
float: left;
position: relative;
}

.categorybox .viewAllHover {
position: absolute;
left: 410px;
top: 120px;
display: none;
}

.categorybox:hover .categorybox .viewAllHover
{
display: inline;
}

HTML:

<div class="categorybox">
<img src="images/image.jpg" alt="Image">
<a href="index.php" class="viewAllHover" style="left: 410px; display: none;"><span>View</span></a>
</div>


Here is the explanation:
view all hover generates the button that should be shown.
So my idea is, that i link the classes for the box and the button together. So that on hover on the box, the button is visible. First i set display: none in the HTML part for the button. If i write display: inline, the button is visible but if i do it with none and try the code


.categorybox:hover .categorybox .viewAllHover
{
display: inline;
}


it doesn't work. I think it musst overwrite my viewAllHover variable "display:none" which i set in the html code and make it visible on hover.
Im out of idea, and i hope somebody can help me. If you don't understand something ask me, I try to explain what I'm trying to do :)

Inline styles have a higher specificity (http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/) than internal or external stylesheets. Therefore the display: none in the HTML is always overriding the styles you declare elsewhere. To override this you can use the !important keyword (display: inline !imporant;) but I’d rather suggest you move the inline styles to the external stylesheet, too. It’s all about separation of presentation and content (http://en.wikipedia.org/wiki/Separation_of_presentation_and_content).

Hi Stefan, da du aus Halle bist nehme ich an, dass du deutsch sprichst :)

Also dein hinweis hat bei mir nichts bewirkt leider. Ich hab diese Idee von einer Seite auf der es so funktioniert, nur irgendwie will das nicht bei mir :(

For all the others:
This idea didn't solve my problem. :(

Hallo Alexander,

Ja, ich spreche deutsch. :) Allerdings versteht das hier kaum jemand, also damit auch andere davon lernen können – und weil die Standardsprache hier Englisch ist – werde ich auch auf Englisch antworten, in Ordnung?

Uhm, you know what I just notice, now that I look at your code thoroughly?

.categorybox:hover .categorybox .viewAllHover
{
display: inline;
}

This assumes that you have an element with class “categorybox” inside another element called “categorybox” which does something on hover. You have only one categorybox, however, not two nested ones so your CSS should look like:
.categorybox:hover .viewAllHover {display: inline;}

This idea didn't solve my problem.The selector .categorybox:hover .categorybox .viewAllHover does not match any elements based upon the HTML code shown.

Furthermore (and as VIPStephan indicated), your a element has an inline style sheet specified via an HTML style attribute; this will override any style rules in external or embedded style sheets because inline style sheets have higher specificity than the other two types of style sheets. Therefore, even if the .categorybox:hover .categorybox .viewAllHover selector is changed to a (presumably correct) .categorybox:hover .viewAllHover selector, the corresponding style rule's display: inline; declaration will still have no effect because it will be overridden by style="left: 410px; display: none;".

Thanks a lot guys!!
Now it is working :)
It's kind of weird that it took me so much time and finally the solution is only to remove one "word" :o
Don't know why I didn't thought about that. Maybe i'd been just a bit too tired. :D

So far. Again thanks a lot. :)
Now i can go on with my project.

Alex