Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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

    Code:
    CSS:
    
    .box { background: #000000; }
    .box:hover { background: #333333; }
    
    HTML:
    
    <div class = "box">
    </div>
    works perfect.

    But here is my code that doesn't work:

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

    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

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,661
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Inline styles have a higher specificity 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.

  • #3
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,661
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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?
    Code:
    .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:
    Code:
    .categorybox:hover .viewAllHover {display: inline;}

  • Users who have thanked VIPStephan for this post:

    Alexander1808 (10-26-2011)

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Alexander1808 View Post
    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;".
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    Alexander1808 (10-26-2011)

  • #6
    New to the CF scene
    Join Date
    Oct 2011
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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"
    Don't know why I didn't thought about that. Maybe i'd been just a bit too tired.

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

    Alex


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •