CSS :hover command is not working

Question

So i am creating a test webpage but having trouble with getting the :hover command to work properly. No matter what i have tried to do from research seems to work so i am in need of some help.

I am trying to blur out a image and then have text fade in, but i got stuck at having the image blur out using webkit filters. So i stripped it back and just tried changing one colour to another, and even that did not work. What Seems to be the problem?

HTML

    #MenuHome {
       top:-20px;
       right:130px   ;
    font-size: 40px;
    }
    #Checkout {
      left:190px   
    }
    body {
      height:1100px;   
    }

    /*Content*/
    #Content {
        position:absolute;
        top:100px;
        width:1100px;
        height: 2000px ;
        left:50%  ;
        margin-left: -550px;
        background-color: #ecf0f1;
        border-radius:15px;
        box-shadow:5px 10px 10px rgba(136, 116, 116, 0.31);
        z-index: -1
    }

     #Content_Products {
        position:absolute;
        top:100px;
        width:1100px;
        height: 870px ;
        left:50%  ;
        margin-left: -550px;
        background-color: #ecf0f1;
        border-radius:15px;
        box-shadow:5px 10px 10px rgba(136, 116, 116, 0.31);
        z-index: -1
    }

    #TopSection {
        position: absolute;
        top: 0px;
        width: 100%;
        Height: 250px;
        background-image:url(AboutUsImage.jpg);
        border-bottom-style: solid;
        border-bottom-color: rgba(60, 231, 178, 0.64);
        border-bottom-width: 5px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
     }

    #AboutUs1 {
 
        font-family:'Ek Mukta';
	    color:white;
        font-size: 48px;
        z-index: 5;
        text-align: center;
    padding: 50px
   
    }
    #Info {
        z-index:0;
        position: absolute;
        top:255px;
        width: 1100px;
    }



    .TelescopesLink {
        position:absolute;
        display:inline-block;
        left:585px;
        top:30px;
        height:250px;
        width:500px;
    }

    .MountLink {
        z-index: 1;
        position:absolute;
        left:15px;
        top:30px;
        height:250px;
        width:500px;
        background-color: green;
    }

    .MountLink:hover{
        z-index: 1;
        background-color: red;   
    
    }
    
    .AstroLink {
        position:absolute;
        left:15px;
         top:330px;
        height:250px;
        width:500px;       
    }

    .AccessoriesLink {
        position:absolute;
        top:330px;
        left:585px;
        height:250px;
        width:500px;   
    }



/*With the main culprit being  */

    .MountLink {
        z-index: 1;
        position:absolute;
        left:15px;
        top:30px;
        height:250px;
        width:500px;
        background-color: green;
    }

    .MountLink:hover{
        z-index: 1;
        background-color: red;   
    
    }

  <div id="Content_Products">
    <div id="TopSection">
              <h1 id="AboutUs1">Products</h1>               
    </div>
    
    <div id="Info">
                    <div class="TelescopesLink">
                    
                        <img  src="telescopes.jpg" >
                    
                    </div>
                
                    <div class="MountLink">
                    
                        
                    </div>
                   
                    <div class="AstroLink">
                        
                        <img src="astro.jpg" >    
                    
                    </div>
               
                    <div class="AccessoriesLink">
                        
                        <img src="accessories.jpg"</img> 
                    
                    </div>
                


    </div>
    
    
</div>

I just cant get it to work, any help or advice would be appreciated

atmd · Accepted Answer · 2015-06-03 08:55:15Z

3

because #Content_Products is positioned absolutely with a minus z-index, the body element is on top of it, so when you hover over the green box, you are actually hovering over the body tag above it.

if you did

body:hover .MountLink{
    z-index: 1;
    background-color: red;   
}

you'll see it work, but the main issue is the z-index:-1 on #Content_Products

answered Jun 3, 2015 at 8:55

atmd

7,5003 gold badges35 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

OzScopes2.0 Over a year ago

The reason for it having the negative z -index is because it scrolls underneath a fixed header at the top of the page, but putting its index to 1 and the headers to 2 solves that issue aswell. Thanks again

Rahul Kashyap · Accepted Answer · 2015-06-03 09:21:24Z

0

z-index is creating problem simply remover z-index form your code and everything will work good..

and css is case sensitive

in #TopSection Height shouldn be height.

answered Jun 3, 2015 at 9:21

Rahul Kashyap

96710 silver badges25 bronze badges

1 Comment

atmd Over a year ago

No it isnt. the selector is case sensitive as it's matching an id/class, but the property it not case sensitive. height, HEIGHT or HeIGhT will all work

Collectives™ on Stack Overflow

CSS :hover command is not working

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related