0

我尝试过 +、控制台符号、< 和 >。他们不工作，任何人都可以为我做这个代码吗？我已经搞砸了一个小时，我似乎无法找到解决方案。

很抱歉之前的帖子。

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;
    }
4

3 回答 3

1

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

于 2013-06-03T09:56:57.120 回答
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/

于 2013-06-03T09:49:00.160 回答
1

这是你需要的吗？

演示

而且我不明白这段代码

#meist:hover < li #submeist{
color: #000
}
于 2013-06-03T09:38:43.090 回答