L'effet de survol des éléments de menu couvre toute la hauteur de la page

Question

Je développe la navigation à gauche. Je veux que la barre rouge apparaisse avant l'élément de menu en survol. Cela fonctionne pour l'élément "Accueil" et ses sous-éléments, mais d'autres éléments racine provoquent une barre rouge au survol qui s'étend sur toute la largeur de la page de haut en bas. $(document).foundation();.vertical.dropdown.menu[href]>i{display:block;}.vertical.dropdown.menu[href]{display:block;text-ali

P粉798010441 · Answer

J'ai apporté des modifications au CSS et y ai ajouté des commentaires. Il y a un problème avec les sélecteurs CSS basés sur la structure DOM

.left-bar.vertical.menu li 而不是 .left-bar .vertical.menu > li ，我删除了空格和 > ，以便所有 li Désormais, tous ont des positions relatives

$(document).foundation();

.vertical.dropdown.menu [href] > i {
  display: block;
}

.vertical.dropdown.menu [href] {
  display: block;
  text-align: center;
}

.left-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 150px;
  height: 100%;
  color: #333;
  background: #FFFFFF;
}

.left-bar .vertical.menu.nested {
  padding: 0;
}

.left-bar [href] > i {
  display: block;
}

.left-bar [href] {
  display: block;
  text-align: left;
  padding: 0;
  color: #333;
}

.left-bar [href]:hover {
  background: #9B9B9BFF;
}

/* I made a change here */
.left-bar.vertical.menu  li {
  position: relative;
  background: #FFFFFF;
  color: #333;
  border: 0;
}


.left-bar .top-level-item [href]:hover::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background-color: red;
}



sssccc
sssccc

P粉899950720 · Answer

J'ai laissé une bordure pour le rouge initialement définie sur le blanc.

J'ai apporté des modifications :

Supprimez tous les CSS inutiles, y compris tous les CSS liés à la position des trucs
Utiliser des cours à la place de certains [href] que je considère comme "fragiles"
Changé en spécifique background-color pour plus de clarté
Définissez 0 bordure, puis ajoutez les détails de la bordure gauche
Utilisez rem 而不是 px ，因为典型的浏览器使用 16px = 1rem base de taille ; vous pouvez forcer le soutien pour ceux qui ne le font pas si nécessaire.

Si vous souhaitez que le conteneur continue à avoir une bordure et fasse quelque chose en rapport avec cela en utilisant CSS, vous pouvez choisir l'enfant comme ceci : Comment styliser l'élément parent lorsque l'enfant est survolé ? Ou peut-être utilisez un simple JavaScript pour vous aider.

$(document).foundation();

.nav-item {
  width: 10rem;
  background-color: #FFFFFF;
  text-align: center;
  color: #333;
  border: 0;
  border-left-width: 0.25rem;
  border-left-style: solid;
  border-left-color: #FFFFFF;
}

.nav-item:hover {
  border-left-color: #FF0000;
}

.nav-item .nav-link:hover {
  background-color: #9B9B9BFF;
}

.nav-link {
  color: #333333;
}

.nav-link * {
  display: block;
}



sssccc
sssccc