CSS链接和悬停操作?

时间:2011-11-04 16:24:41

标签: css hyperlink

有一个页面可以安装指向链接输入的其他网站的链接,如下所示:

<div id="mainContent">
         <div id="links">
            <a href="http://www.google.com" target="blank">Go To Google</a>
            <a href="http://www.yahoo.com" target="blank">Go To Yahoo</a>
            <a href="http://www.espn.com" target="blank">Go To ESPN</a>
            <a href="http://www.abcnews.com" target="blank">Go To ABC News</a>
            <a href="http://www.youtube.com" target="blank">Go To Youtube </a>        
       </div>       
</div>

由外部样式表中的以下css控制

div#links a {
        width:550px;
        display:block; 
        margin-left:10px; 
        margin-top:2px; 
        padding: 2px 5px 2px 5px;
        text-decoration:none;
        font-family:arial;
        font-weight:bold;
        text-align:center;
        background-color: black;
        color: white;
        font-size:9pt;
        border: 3px red ridge;
}
a:hover {
        background-color:navy;
        color:red;
        font-style:italic;
}

包含悬停的显示器在独立情况下工作时头部有css,但是当我将其移动到页面中的真实内容区域并将css安装在外部样式表中时,悬停不再有效!

1 个答案:

答案 0 :(得分:1)

您可能没有以正确的方式链接到样式表。

要么你还没有链接它:

<link href="/style/style.css" rel="stylesheet" type="text/css">

或者您使用的是本地路径:

您应该(几乎)始终使用相对路径链接到网络上的内容。

所以:

http://example.com/style/style.css

file://host/path/style/style.css

变为

/style/style/css