Question

我正在创建一个包含HTML和CSS的简单欢迎页面。在某些时候，我想根据页面上链接的悬停属性更新div的内容。兄弟选择器似乎非常适合我需要的东西。但是，如果一切都在本地（在Chrome和IE8上）运行良好，当我把它放在我的网络服务器上时，内容永远不会在IE8中显示。你知道什么可以解释这个问题吗？

以下是HTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <link rel="stylesheet" href=".\styles\default.css" type="text/css"/>
    </head>
    <body class = "main">
        <h1 class = "title">Select the application to launch</h1>       
        <a href = ".\app1\" class="app1"></a>
        <a href = ".\app2\" class="app2"></a>
        <a href = ".\app3" class= "app3"></a>
        <a href = ".\app4" class= "app4"></a>
        <div class = "description"></div>
    </body>
</html>

和CSS：

        body.main
    {
        text-align: center;
        width: 960px;           
        margin: auto;
        border-style: solid;
        border-color: #0A2F85;
        border-width: 0px;          
    }

    div
    {
      color: black;
      display: inline-block;
    }

    h1.title
    {           
        height: 50px;
        line-height: 50px;
        width: 100%;
        display:inline-block;                       
        background-image: url(../images/bande_orange.PNG);
        background-repeat: no-repeat;
        background-position:right top;          
        text-align:center;
        color:white;
        font-family:Verdana;            
        font-size : 18px;
        font-weight: bold;
        background-size: 100%;
        margin-top: 50px;           
    }               

    a
    {
        text-align:center;
        font-family:Verdana;
        font-size:18px;
        display:inline-block;
        margin:0;
        padding:0;
        width:384px;                        
        color:white;
        line-height: 227px;
        height :227px;                      
    }
    a.app1
    {           
        background:url('../images/app1.png');
    }
    a.app1:hover
    {
        background:url('../images/app1_Over.png');
    }
    a.app2
    {           
        background:url('../images/app2.png');                       
    }       
    a.app2:hover
    {           
        background:url('../images/app2_Over.png');                      
    }               
    a.app3
    {           
        background:url('../images/app3.png');                       
    }       
    a.app3:hover
    {           
        background:url('../images/app3_Over.png');                      
    }               
    a.app4
    {           
        background:url('../images/app4.png');                       
    }       
    a.app4:hover
    {           
        background:url('../imagesapp4_Over.png');                       
    }         

    div.description
    {           
        margin-top: 20px;           
        border-style: dashed;
        border-color: #A59D95;                      
        border-width: 3px;              
        Height: 70px;                       
        text-align: left;           
        font-family:Verdana;            
        color:black;
        font-weight:bold;
        font-size : 14px;
        padding: 5px;
        margin-left: 10px;
        width:79%;          
    }

    a.app1:hover ~ div.description
    {   
        color: #7AB800;
        border-color: #7AB800;                                                          

    }
    a.app1:hover ~ div.description::after
    {           
        content: 'Description of app 1';
    }           

    a.app2:hover ~ div.description
    {           
        color: #0A2F85;
        border-color: #0A2F85;                                                          
    }
    a.app2:hover ~ div.description:after            
    {
        content: 'Description of app 2';
    }           

    a.app3:hover ~ div.description
    {
        color: #981E32;
        border-color: #981E32;          
    }
    a.app3:hover ~ div.description:after
    {                   
        content: 'Description of app 3';
    }           

    a.app4:hover ~ div.description
    {
        border-color:  #E98300;
        color: #E98300;
    }
    a.app4:hover ~ div.description:after
    {           
        content: 'Description of app 4';
    }

使用IE8在线时隐藏的兄弟选择器的内容

0 个答案: