图像悬停未出现在 CSS 中，但出现在 HEAD 中答案

【问题标题】：Image Hover isn't appearing in CSS but it does in HEAD图像悬停未出现在 CSS 中，但出现在 HEAD 中
【发布时间】：2013-02-21 21:33:10
【问题描述】：

   .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 中时它不起作用

【问题讨论】：

你的 css 要么需要在一个链接的外部样式表中，要么在你的 head 元素的
@AnnaThpvng 这是你的整个文件吗？
您好，这种方法看起来确实过时了，有更简单的方法来实现它。我可以推荐kyleschaeffer.com/user-experience/pure-css-image-hover

标签： css hover hyperlink

【解决方案1】：

好的，首先，正如 Mat 所说，您需要一个链接样式表，方法是添加：

<link href="/fileName.css" rel="stylesheet" type="text/css" media="screen" />

在head标签中。或者您可以添加这样的样式标签（也在 head 标签内）：

<style>
    body
    {
        background-color: #f00;
    }
</style>

除此之外，如果你还有问题，我会看这里：

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

对于 CSS 的特殊性规则，但是作为一般经验法则（我已经使用过），在我似乎无法准确指出为什么我指定渲染的东西没有在外部渲染的情况下css 文件，我将使用它内联，像这样：

<p style="background-color: #f00;">Paragraph contents...</p>

这是因为内联 CSS（固有地）比外部文件的 CSS 具有更高的特异性。

【讨论】：