html – 将鼠标悬停在标签上仅填充文本所在的背景

2023年7月22日 132次阅读

我正在使用嵌套循环

当我在列表项上悬停一个标记时,它只悬停包含文本而不是整个ul标记的are

谢谢

<style>
.child {
    display: none;
}

.parent:hover .child {
    display: table-caption !important;
}

.LastHope li:hover a {
    background: #5db2ff !important;
}

.second {
    display: !important;
    margin-left: -40px;
}

.parent {
    width: 5%;
    padding-right: 45px;
}</style>

<div class="container-fluid" id="upper;">
    <div class="row">
        <div>
            <ul style="display: -webkit-box; color: white; background: #5db2ff; font-size: 16px; font-family: 'Segoe UI'; height: 22px; ">
                @foreach (var item in Model)
                {
                    <li class="parent">
                        <a class="first">  @item.Name</a>

                        <ul class="LastHope" style="overflow-y: visible !important; color: white; font-size: 16px; font-family: 'Segoe UI'; width: 80%; background: #338dc7; border-left: 1px solid white; ">
                            @foreach (var Temp in item.T_Page.ToList())
                            {

                                <li class="child">
                                    <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">@Temp.Name</a>
                                </li>
                            }
                        </ul>
                    </li>


                }
            </ul>
        </div>
    </div>
</div>

最佳答案 要在悬停而不仅仅是锚元素上更改整个内部无序列表.LastHope的背景​​颜色,只需将背景颜色添加到< ul>即可.元素以及像这样盘旋时：

.LastHope:hover {
    background: #5db2ff;
}

检查并运行以下代码片段,以获取上述代码的实际示例：

.child {
    display: none;
}

.parent:hover .child {
    display: table-caption !important;
}

.LastHope:hover {
    background: #5db2ff !important;
}
.LastHope:hover li a {
    background: #5db2ff !important;
}

.second {
    display: !important;
    margin-left: -40px;
}

.parent {
    width: 5%;
    padding-right: 45px;
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid" id="upper">
  <div class="row">
    <div>
      <ul style="display: -webkit-box; color: white; background: #5db2ff; font-size: 16px; font-family: 'Segoe UI'; height: 22px; ">
        <li class="parent">
          <a class="first">A</a>
          <ul class="LastHope" style="overflow-y: visible !important; color: white; font-size: 16px; font-family: 'Segoe UI'; width: 80%; background: #338dc7; border-left: 1px solid white; ">
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">A</a>
            </li>
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">B</a>
            </li>
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">C</a>
            </li>
          </ul>
        </li>
<li class="parent">
          <a class="first">A</a>
          <ul class="LastHope" style="overflow-y: visible !important; color: white; font-size: 16px; font-family: 'Segoe UI'; width: 80%; background: #338dc7; border-left: 1px solid white; ">
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">A</a>
            </li>
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">B</a>
            </li>
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">C</a>
            </li>
          </ul>
        </li>
<li class="parent">
          <a class="first">A</a>
          <ul class="LastHope" style="overflow-y: visible !important; color: white; font-size: 16px; font-family: 'Segoe UI'; width: 80%; background: #338dc7; border-left: 1px solid white; ">
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">A</a>
            </li>
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">B</a>
            </li>
            <li class="child">
              <a class="second" style="border-bottom: 1px solid white;  background: #338dc7;">C</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
点赞