Question

<style type="text/css">
    #parent:hover #abc{
        display: block ;
    }
</style>

：悬停在此处不起作用以下是使用的代码。只要鼠标悬停在#parent #abc上就应该显示。但事实并非如此。

<a class="w3-bar-item w3-button" id="parent">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
    <li class="w3-bar-item w3-button">Link1 </li>
    <li class="w3-bar-item w3-button">Link1</li>
    <li class="w3-bar-item w3-button">Link1</li>
</ul>

请有人能解决问题。

编辑：整个代码

 <div class="w3-dropdown-hover" style="width: 50%;">
    <button class="w3-button">SomeButton</button>
    <div class="w3-bar-block w3-black w3-dropdown-content   " id="xyz" style="width: 100px; ">
        <a class="w3-bar-item w3-button">LIK1</a>
        <div style="margin:0px; padding: 0px; position: relative;" id="parent">
            <a class="w3-bar-item w3-button">LIK2</a>
            <ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
                <li class="w3-bar-item w3-button">
                    Link1
                </li>
                <li class="w3-bar-item w3-button">
                    Link1
                </li>
                <li class="w3-bar-item w3-button">
                    Link1
                </li>
            </ul>
        </div>      
        <a class="w3-bar-item w3-button">LIN3</a>
    </div>
</div>

Answer 1

使用adjacent兄弟选择器（+）或general兄弟选择器（〜）选择兄弟姐妹。请查看下面的代码段以供参考。检查here以获取有关组合器选择器的更多详细信息。

#parent:hover ~#abc{
  display: block !important;  
}

<a class="w3-bar-item w3-button" id="parent">LIK2</a>
<ul style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none" id="abc" class="w3-bar-block">
  <li class="w3-bar-item w3-button">Link1 </li>
  <li class="w3-bar-item w3-button">Link1</li>
  <li class="w3-bar-item w3-button">Link1</li>
</ul>

Answer 2

因为您为#abc设置了内联样式并且永远不允许您在头部设置其他样式，所以您应该在头部设置#abc样式，如下所示：

CSS：

    <style type="text/css">
    #abc {
        list-style-type: none;
        margin: 0px;
        margin-left: 100px;
        position: absolute;
        top: 0px;
        padding: 0px;
        background-color: green;
        display: none;
    }

    div#parent:hover > ul#abc {
        display: block;
    }
</style>

HTML：

<div id="parent">
    <a class="w3-bar-item w3-button">LIK2</a>
    <ul id="abc" class="w3-bar-block">
        <li class="w3-bar-item w3-button">Link1 </li>
        <li class="w3-bar-item w3-button">Link1</li>
        <li class="w3-bar-item w3-button">Link1</li>
    </ul>
</div>

Answer 3

尝试这样做，您可以根据需要提供适当的ID。

<ul style="" id="abc" class="w3-bar-block">
<li>
LIK2<br>
        <ul id="inner" style="list-style-type: none;margin: 0px; margin-left:100px;position: absolute; top: 0px; padding: 0px; background-color:green; display: none">

          <li class="w3-bar-item w3-button">Link1 </li>
          <li class="w3-bar-item w3-button">Link1</li>

          <li class="w3-bar-item w3-button">Link1</li>
        </ul>  
  </li>
</ul>

 constructor(
    private toastrService: ToastrService,
    private viewContainerRef: ViewContainerRef
  ) {
    this.toastrService.viewContainerRef = this.viewContainerRef;
  }
  ngOnInit() {
    this.toastrService.success('Data inserted Successfully', 'Toastr fun!');
  }

希望这会有所帮助

悬停时id无法正常工作

3 个答案: