伪类:悬停停止工作但是:焦点仍然适用于CSS

时间:2013-12-31 09:07:23

标签: css hover

我正在使用html和CSS编写网页。我的伪类:悬停停止在我的网页上工作,但是:焦点仍然有效。 Hover工作正常,然后我做了一个不相关的编辑(在我的一个块中添加了一个图像),并注意到它已停止工作。我删除了我的最后一个更改但它仍然无效。

我已经检查了所有内容并通过验证器运行了html和css,除了使用字符编码之外没有任何错误,但我知道没有它就可以正常工作。这真的没有意义!

我将显示我的页面和我的代码。请记住这是我的第一个网页,我知道我没有正确优化我的背景图像,并且可能有一些不必要的div,但考虑到一周前我觉得它很不错,我不知道html是什么。我对CSS进行了大量评论和组织,您可以在顶部附近找到我的悬停代码以及其余的无类/ ID。悬停链接是侧栏上网页上的唯一链接。

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

这是我的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>adrianhoule@gmail.com</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>

这是我的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
 adrianhoule@gmail.com
/*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)*****************************************************************************************/

感谢您的帮助。

2 个答案:

答案 0 :(得分:5)

关于在其中添加额外空格,CSS 非常敏感。将a:hover合并为:

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

除非您希望每个元素都受到影响,否则还要将其设为a:focus

答案 1 :(得分:1)

删除a和:hover

之间的空格
a:hover{
   background-color: yellow; 
    text-decoration: none;
    font-size: larger;
}