首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >图像悬停不会出现在CSS中,但会出现在HEAD中

图像悬停不会出现在CSS中,但会出现在HEAD中
EN

Stack Overflow用户
提问于 2013-02-22 05:33:10
回答 1查看 77关注 0票数 0
代码语言:javascript
复制
   .cssnav  {
                        position:relative;
                        font-family: arial, helvetica, sans-serif;
                        background-image:  url(img/twitter.jpg)no-       repeat center center;
                        background-repeat: no-repeat;
                        white-space: nowrap;
                        display: block;
                        width: 211px;
                        height: 44px;
                        margin: 0;
                        padding: 0;
            }
            .cssnav a {
                        display: block;
                        color: #000000;
                        font-size: 11px;
                        width: 211px;
                        height: 44px;
                        display: block;
                        float: left;
                        color: black;
                        text-decoration: none;
            }

            .cssnav img {width: 211px; height: 44px; border: 0; }
            * html a:hover {visibility:visible}
            .cssnav a:hover img{visibility:hidden}

            .cssnav span {
                        position: absolute;
                        left: 30px;
                        top: 15px;
                        margin: 0px;
                        padding: 0px;
                        cursor: pointer;
                        width: 149px;
                        height: 14px;
                        text-align: center;
            }
            /* END OF NAVIGATION */


  }



<html>

    <head>
        <title>The history of aeronautics</title>

        <meta charset="utf-8" />
        <meta name="description" content="A parallax scrolling experiment using          jQuery" />

        <link rel="stylesheet" media="all" href="css/test.css" />

    </head>

    <body>




                <!--MAIN NAVIGATION START-->

                <div class="cssnav"><a href="http://www.search-this.com/" title="Search Engine Submission"><img src="img/twitter.png" alt="Search Engine Submission" /><span>Search
                  Engine Submission</span></a></div>
                <div class="cssnav"><a href="http://www.search-this.com/website-design/" title="Website Design"><img src="img/twitter.jpg" alt="Website Design" /><span>Website
                  Design</span></a></div>




    </body>

</html>

我已经包含了我的CSS和HTML。我已经这样做了一段时间,试图弄清楚为什么它不起作用...我在这里使用三合一翻转按钮代码:http://www.webcredible.co.uk/user-friendly-resources/css/rollover-buttons.shtml

当我将代码放在HTML区域时,它可以工作,但当我把它放在CSS中时,它就不起作用了

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-02-22 05:43:05

好的,首先,正如Mat所说,你要么需要一个链接的样式表,要么添加:

代码语言:javascript
复制
<link href="/fileName.css" rel="stylesheet" type="text/css" media="screen" />

在head标签中。或者您可以像这样添加样式标签(也可以在head标签中):

代码语言:javascript
复制
<style>
    body
    {
        background-color: #f00;
    }
</style>

除此之外,如果你仍然有问题,我会在这里寻找:

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

然而,对于CSS的特定规则,作为一般的经验法则(我已经使用过),在我似乎不能准确地指出为什么我指定要呈现的内容没有呈现在外部css文件中的情况下,我将使用内联,如下所示:

代码语言:javascript
复制
<p style="background-color: #f00;">Paragraph contents...</p>

这是因为内联CSS比外部文件的CSS具有更高的特异性(本质上)。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/15012641

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档