Html 一个部门影响另一个部门

Html 一个部门影响另一个部门,html,css,web,Html,Css,Web,我尝试了+、控制台符号、。他们不工作,有人能帮我做这个代码吗?我已经胡闹了一个小时,似乎找不到解决办法 对不起,我之前的邮件 HTML ASD CSS #meist{ 显示:内联; 浮动:左; 宽度:180px; 高度:50px; 颜色:#191919; 文本对齐:居中; 溢出:隐藏; 背景:99万; -moz边框半径左上角:50px; 边框左上半径:50px; } #子列表{ 显示:块; 颜色:#ccc; } #迈斯特:悬停

我尝试了+、控制台符号、<和>。他们不工作,有人能帮我做这个代码吗?我已经胡闹了一个小时,似乎找不到解决办法

对不起,我之前的邮件

HTML

  • ASD

CSS

#meist{
显示:内联;
浮动:左;
宽度:180px;
高度:50px;
颜色:#191919;
文本对齐:居中;
溢出:隐藏;
背景:99万;
-moz边框半径左上角:50px;
边框左上半径:50px;
} 
#子列表{
显示:块;
颜色:#ccc;
}
#迈斯特:悬停
这就是你需要的吗

我不明白这个密码

#meist:hover < li #submeist{
color: #000
}
#meist:hover
这就是你需要的吗

我不明白这个密码

#meist:hover < li #submeist{
color: #000
}
#meist:hover
这是最接近的解决方案

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>
#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;
    } 
演示:


这是最接近的解决方案

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>
#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;
    } 
演示:



由于CSS目前没有可用的父选择器,因此仅使用CSS无法实现您想要实现的目标。您要么改变html的结构,要么使用Javascript获得所需的结果。使用jQuery可以很容易地完成类似的操作。

由于CSS目前没有可用的父选择器,因此仅使用CSS是不可能实现的。您要么改变html的结构,要么使用Javascript获得所需的结果。使用jQuery可以很容易地完成类似的操作。

这里的问题是什么。。。当你将鼠标悬停在“meist”上时,你应该更改“.sublist”样式,但无论如何它都不会更改。到目前为止,我可以看到你缺少了
  • 的结束标记。是的。。感谢您指出这一点,我错过了它们。这不能用纯CSS来完成(使用您当前的标记),因为
    :hover
    元素和您要应用颜色的元素之间不存在可通过此处的问题来表达的关系。。。当你将鼠标悬停在“meist”上时,你应该更改“.sublist”样式,但无论如何它都不会更改。到目前为止,我可以看到你缺少了
  • 的结束标记。是的。。感谢您指出这一点,我错过了它们。这不能用纯CSS来做(使用您当前的标记):hover
    元素和您要应用颜色的元素不在一个可以用Yes表示的关系中。这是我正在寻找的//我在网上找到了它,我认为它可能有用35; meist:hover
      现在悬停,则
      .sublist sub
      元素将被更改,而不仅仅是上一个
      的第一个
    • ,它只是更改问题以适合您的答案。真正的答案是,如果不更改标记,就不能在纯CSS中完成!非常感谢你。。我不知道我只能换班,这与课无关。。是关于“+”符号的。。。指相邻元素。。很高兴我能帮助你!!不客气……)但是您已经更改了标记以使其工作。如果上一个
      现在悬停,则
      .sublist sub
      元素将被更改,而不仅仅是上一个
      的第一个
    • ,它只是更改问题以适合您的答案。真正的答案是,如果不更改标记,就不能在纯CSS中完成!