一个分裂影响另一个

时间:2013-06-03 09:32:59

标签: html css web

我试过+,控制台标志,<和>。他们不工作,有人可以为我做这个代码吗?我现在已经搞乱了一个小时,我似乎无法找到它的解决方案。

对于之前的帖子感到抱歉。

HTML

          <ul>  
            <li id="meist">  
                <p><a href="meist.html">Meist</a></p>  
            </li> 
            <li id="seadmed">  
                <p><a href="seadmed.html">Seadmed</a></p>  
            </li> 
           <li id="tooted">  
                <p><a href="tooted.html">Tooted</a></p>  
            <li id="hooldus">  
                <p><a href="tooted.html">Tooted</a></p> 
         <li id="kontakt">  
                <p><a href="kontakt.html">Kontakt</a></p> 
        </ul>

<ul>
    <li id="submeist"> <p> ASD </p>
    </li>
</ul>

CSS

     #meist {  
        display: inline;
        float:left;
        width:180px;  
        height:50px;  
        color:#191919;  
        text-align:center;  
        overflow:hidden; 
        background:#990000;
        -moz-border-radius-top-left: 50px;
        border-top-left-radius: 50px;

    } 

    #submeist {
        display:block;
        color:#ccc;
    }

    #meist:hover < li #submeist{
    color: #000
}

   #meist:hover
    {  
        text-decoration: underline;
        color: white;
        font-size: 17.5px; 
        line-height: 15px;
    } 

3 个答案:

答案 0 :(得分:1)

这是你需要的吗?

<强> DEMO

我不明白这段代码

#meist:hover < li #submeist{
color: #000
}

答案 1 :(得分:1)

这是最近的解决方案。

<强> HTML:

<ul id="meist">  
            <li>  
                <p><a href="meist.html">Meist</a></p>  
            </li> 
            <li id="seadmed">  
                <p><a href="seadmed.html">Seadmed</a></p>  
            </li> 
           <li id="tooted">  
                <p><a href="tooted.html">Tooted</a></p>  
            <li id="hooldus">  
                <p><a href="tooted.html">Tooted</a></p> 
         <li id="kontakt">  
                <p><a href="kontakt.html">Kontakt</a></p> 
        </ul>

<ul id="submeist">
    <li class="submeist-sub"> <p> ASD </p>
    </li>
</ul>

<强> CSS:

#meist {  
        display: inline;
        float:left;
        width:180px;  
        height:50px;  
        color:#191919;  
        text-align:center;  
        overflow:hidden; 
        background:#990000;
        -moz-border-radius-top-left: 50px;
        border-top-left-radius: 50px;

    } 

    #submeist {
        display:block;
        color:#ccc;
    }

    #meist:hover + #submeist > .submeist-sub{
    color: #000
}

   #meist:hover
    {  
        text-decoration: underline;
        color: white;
        font-size: 17.5px; 
        line-height: 15px;
    } 

样本:

http://jsfiddle.net/jTBx5/

答案 2 :(得分:1)

由于CSS目前没有可用的父选择器,因此只有CSS才能实现您想要实现的目标。您要么必须更改html的结构,要么使用Javascript来获得所需的结果。使用jQuery可以很容易地完成这样的事情。