CSS: Css стиль не применяется к ссылке

Question

У меня проблема с разочарованием, один специальный стиль CSS не применяется к ссылке <a> тег.

Элемент, о котором я говорю, - это наведение, которое применяется к заголовку боковой панели (также является переключателем). Наведение применяется к заголовку отлично, но также, похоже, относится и к 1-му и 2-му подзаголовку (в переключателе). Который вызывает боль.

Как вы можете видеть на картинке выше. Серийная рамка (зависание) в ожидании не должна быть там.

Я изменил div извне тега ul внутри, я переименовал идентификаторы и классы, но я не могу избавиться от коробки. Единственный способ, которым я могу избавиться от коробки, - это удалить заголовок: наведите курсор из моего css, который работает, но я не хочу этого делать.

.header:hover { 
 
    background-color: #555e60; 
 
}

<a id="order" class="header" href="#"><h3 id="orderr">Orders</h3></span></a> 
 
<div id="Order_div" style="display: none;"> 
 

 
    <ul class="tabs"> 
 
    <div> 
 
     <li id='Red' class="order"><a class="sb" href="Franchise-account-orders.php">Overview</a></li> 
 
     <li id='Blue' class="order"><a class="sb" href="admin_panel.php">Pending</a></li> 
 
     <li id='Green' class="order"><a class="sb" href="admin_panel.php"> Accepted</a></li> 
 
     <li id='Purple' class="order"><a class="sb" href="admin_panel.php"> Completed</a></li> 
 
     <li id='Yellow' class="order"><a class="sb" href="admin_panel.php"> Declined</a></li> 
 
    </div> 
 
    </ul> 
 

 
</div>

Answer 1

Я нашел 2 проблемы в вашем HTML:

1. Похоже, есть сломанный </span> внутри вашей ссылке.
2. Другой (вызывающий проблему) - это h3 внутри ссылки. Стиль по умолчанию для заголовка браузера переопределяет ваш стиль.

Удалите <h3>, и он будет работать.

Теперь вы можете установить <span> так, как вы хотите.

Посмотрите:

.header:hover{ 
 
    background-color:#555e60; 
 
}

<a href='' class='header'><h3>With H3</h3></a> 
 

 
<a href='' class='header'>Without H3</a>