Наведите указатель мыши на тег только на фон, где присутствует текст

Question

Я использую вложенный цикл при наведении курсора на элемент списка. a помечает только тот, где находятся тексты, которые содержат не весь ul тег

спасибо

<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>

Answer 1

Чтобы изменить цвет фона всего внутреннего неупорядоченного списка .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>