CODEWITHSUNDEEP
csshover
Adrian
Adrian

Reputation: 47

Pseudo Class :hover stopped working but :focus still works CSS

I am programing a webpage with html and CSS. My pseudo class :hover stopped working on my webpage, but :focus still works. Hover was working fine, and then I made an unrelated edit (added an image to one of my blocks), and noticed it had stoped working. I deleated my last change and it still did not work.

I have checked everything and ran both the html and css through validators and there are no errors other than something about using character encoding, but I know it worked fine without that. It really makes no sense!

I will show my page and my code. Keep in mind this is my very first webpage, I know that I did not optimize my background images properly, and may have some unnecessary divs, but I feel pretty good about it considering a week ago I did not know what html was. I have heavily commented and organised my CSS, you can find my hover code near the top along with the rest of the none classes/ID's. The hover link is the only link on the webpage on the sidebar.

http://www.adrianhoulewebprojects.com/HomePage.html

Here is my HTML

<!--Home Page for adrianhoulewebpojects.com Version 1.0-->
<!--Written by Adrian Houle-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
    <link rel="stylesheet" type="text/css" href="css/HomePageStyle.css">
    <title>Adrian Houle Web Projects</title>
</head>

<body>

    <div id="Sidebar">
        <h3>Projects</h3>
        <ul>
            <li>
                <a href="http://www.adrianhoulewebprojects.com/UnderConstruction.html">Under Construction</a>
            </li>
            <li>Unfinished Project #2</li>
            <li>Unfinished Project #3</li>
            <li>Unfinished Project #4</li>
            <li>Unfinished Project #5</li>
        </ul>
    </div>

    <div class="box">

        <div class="HalfSpacer"></div>

        <div class="TransBox" id="Header">
            <h1>Welcome to<br>AdrianHouleWebProjects.com</h1>
        </div>

        <div class="Spacer"></div>

        <div class="TransBox" id=About>
            <h2>About:</h2>
            <p>Welcome to my website. I had a bit of time over the holidays and decided to finally get around to learning web programming. The purpose of this website is to give me a place to practice and display what I learn in the form of web projects. I may also be making some blogs that will also serve to showcase my travelling and hobbies.</p>
        </div>

        <div class="Spacer"></div>

        <div class="TransBox" id="NewStuff">
            <h2>Coming Soon</h2>
            <ul>
                <li>
                    <h3>Australia Travel Blog</h3>
                    <img src="http://www.adrianhoulewebprojects.com/img/AustralianFlag100by50.gif"  alt="Australian Flag" >
                    <p>2013-2014 Australia Travel Blog coming soon.</p>
                </li>
            </ul>
        </div>

        <div class="Spacer"></div>

        <div class="TransBox" id="Contact">
            <h2>Contact Info:</h2>
            <p class="Italic">Please report any compatibility, accessibility, or security issues to:</p>
            <p>Adrian Houle</p>
            <p>[email protected]</p>
        </div>

        <div class="Spacer"></div>

        <div class="TransBox" id="Footer">
            <p>Website by Adrian Houle</p>
        </div>

    </div>
    <div class="BottomBorder"></div>

</body>

</html>

Here is my CSS

/*****************************************  Info  *********************************************************/
/*Style Sheet for HomePage of adrianhoulewebprojects.com*/
/*Written by Adrian Houle*/
/*For any issues with my website (compatibility, accessibility, white-hat reports) feel free to contact me at
 [email protected]
/*Page Purpose: Create a homepage that welcomes users to my website and directs them to various projects*/
/***********************************************************************************************************/

/*************************************  Table of Contents  **************************************************/
/*CSS layout*/
/*  -none specific elements*/
/*  -classes*/
/*  -ID's and children of ID's*/
/*  -Other*/
/************************************************************************************************************/

/**************************************      CSS code     ****************************************************/

/* -none specific elements ***********************************************************************************/

p {
    font-size: large;
    font-weight: bolder;
}

a {
    color: blue;
}

a :hover, :focus{
    background-color: yellow; 
    text-decoration: none;
    font-size: larger;
}

/* -classes **************************************************************************************************/

/*Element that contains everything except the sidebar and has the main background image.*/
.box { 
    display: block;
    position: relative;
    width: 100%; /*test and adjust to keep it from expading the browser*/
    height: 100%;
    border: 3px solid black;
    right: 0;
    top: 0px;
    padding: 0;
    background-image: url(http://www.adrianhoulewebprojects.com/img/CautionStripes.png);
} 

/*Allows for synchronised space adjustment between elements*/
.Spacer {
    position :relative;
    height: 100px;
}
/*Allows for synchronised space adjustment between elements*/
.HalfSpacer {
    position :relative;
    height: 30px;
}

/*Every element that contains text belongs to this class*/
/*This class has nothing to do with transgender boxes, or gender boxes in general*/
.TransBox {
    width: 70%;
    padding: 1em;
    z-index: 1;
    left: 20%;
    position: relative;
    background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
    moz-box-shadow: 0 0 5px 5px #888; /*shadow effect with cross compatibility*/
    webkit-box-shadow: 0 0 5px 5px#888;
    box-shadow: 0 0 5px 5px #888;
}

.Italic {
    font-style: Italic;
}
/* -ID's and children of ID's********************************************************************************/

/*Sidebar, to be fixed to the left hand side of the screen. Must allow conent to the right of it*/
#Sidebar {
    height: 100%;
    width: 10%;
    left: 0px;
    top: 0px;
    padding: 2%;
    display: inline;
    position: fixed;
    background-image: url(http://www.adrianhoulewebprojects.com/img/SteelPlate.jpg);
    border-style: solid;
    border-width: 3px;
    z-index: 2;
}
#Sidebar ul {
    padding-left:0;
}
#Sidebar li {
    margin: 10%;
}

/*Header text*/
#Header h1 {
    text-align: center;
}

#Footer p {
    text-align: center;
}
/* -Other (empty)*****************************************************************************************/

Thank you for any help.

Upvotes: 1

Views: 384

Answers (2)

Sowmya
Sowmya

Reputation: 26969

Remove the space between a and :hover

a:hover{
   background-color: yellow; 
    text-decoration: none;
    font-size: larger;
}

Upvotes: 1

Deryck
Deryck

Reputation: 7658

CSS is very touchy about putting extra spaces in it. Combine a with :hover like this:

a:hover, a:focus{
    background-color: yellow; 
    text-decoration: none;
    font-size: larger;
}

Also want to make it a:focus unless you want every element to be affected.

Upvotes: 5

Related Questions