仅在将鼠标悬停在复选框链接上时显示文本描述

Question

I'm trying to only show the "This is an item" text when hovering each checkbox link. For some reason, the "This is an item" text still seems to show when when checkbox link is not hovered over. Is there any way to only show text when the checkbox item is hovered over?

 var accordions = document.getElementsByClassName("accordion"); for (var i = 0; i < accordions.length; i++) { accordions[i].onclick = function() { this.classList.toggle('is-open'); var content = this.nextElementSibling; if (content.style.maxHeight) { // accordion is currently open, so close it content.style.maxHeight = null; } else { // accordion is currently closed, so open it content.style.maxHeight = content.scrollHeight + "px"; } } }

 /* Filter Display */.filter-box { background-color: #f5f5f5; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }.filter-box button { background-color: rgb(49, 49, 49); color: white; } /* Section Buttons */ button.accordion { width: 30%; background-color: black; border: none; outline: none; text-align: left; padding: 15px 20px; font-size: 14px; color: white; cursor: pointer; transition: background-color 0.2s linear; color: white; } button.accordion:after { font-family: "fontawesome"; font-size: 14px; float: right; } button.accordion.is-open:after { content: '\f056'; } button.accordion:hover, button.accordion.is-open { background-color: grey; }.accordion-content { width: 30%; background-color: rgb(255, 255, 255); border-left: 1px solid black; border-right: 1px solid whitesmoke; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-in-out; }.accordion-content li { list-style-type: none; }.accordion-content li:hover { font-weight: bold; color: red; }.item-description { display: none; }.accordion-content li:hover, .item-description { display: contents; }

 <button class="accordion">Catagories</button> <div class="accordion-content"> <div class=list-item> <li> <label> <input type="checkbox" name="checkbox" />Item1 </label> </li> <p class="item-description">This is an item</p> </div> <div class=list-item> <li> <label> <input type="checkbox" name="checkbox" />Item2 </label> </li> <p class="item-description">This is an item</p> </div> <div class=list-item> <li> <label> <input type="checkbox" name="checkbox" />Item3 </label> </li> <p class="item-description">This is an item</p> </div> </div>

text in the bottom and only initiate text when hovering beside each checkbox.

Answer 1

Your HTML contains invalid markup and you have conflicting styles for your list items hover state.First, lets address the HTML issues:

1. An <li> element may only be a child of <ul> , <ol> , or <menu> so using a <div> as the parent of list items in your current structure is invalid.
2. The permitted content for list elements is Flow Content so you have to make sure only elements of that group are children of <li> tags.

After reformatting your HTML so the markup was valid, (which you can always verify using W3C Validator ) and fixing some of your list item hover state styling. The text "This is an item" displays inline with the checkboxes when hovered as expected.

This is why the text was visible before and after hover:

.item-description {
  display: none;
}

.accordion-content li:hover,
.item-description {
  display: contents;
}

Your making the .item-description text disappear with display: none then on the next line make it visible with display: contents . I assumed you meant to style the .item-description when list items were hovered so I changed this selector to be .accordion-content li:hover.item-description and that ensures text is only displayed when the list items are hovered.

 var accordions = document.getElementsByClassName("accordion"); for (var i = 0; i < accordions.length; i++) { accordions[i].onclick = function() { this.classList.toggle('is-open'); var content = this.nextElementSibling; if (content.style.maxHeight) { // accordion is currently open, so close it content.style.maxHeight = null; } else { // accordion is currently closed, so open it content.style.maxHeight = content.scrollHeight + "px"; } } }

 /* Filter Display */.filter-box { background-color: #f5f5f5; display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }.filter-box button { background-color: rgb(49, 49, 49); color: white; } /* Section Buttons */ button.accordion { width: 30%; background-color: black; border: none; outline: none; text-align: left; padding: 15px 20px; font-size: 14px; color: white; cursor: pointer; transition: background-color 0.2s linear; color: white; } button.accordion:after { font-family: "fontawesome"; font-size: 14px; float: right; } button.accordion.is-open:after { content: '\f056'; } button.accordion:hover, button.accordion.is-open { background-color: grey; }.accordion-content { width: 30%; background-color: rgb(255, 255, 255); border-left: 1px solid black; border-right: 1px solid whitesmoke; padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-in-out; }.accordion-content li { list-style-type: none; }.accordion-content li label { margin-right: .5rem; }.accordion-content li:hover { font-weight: bold; color: red; }.item-description { display: none; }.accordion-content li:hover.item-description { display: contents; }

 <button class="accordion">Categories</button> <ul class="accordion-content"> <li class=list-item> <label> <input type="checkbox" name="checkbox" />Item1 </label> <p class="item-description">This is an item</p> </li> <li class=list-item> <label> <input type="checkbox" name="checkbox" />Item2 </label> <p class="item-description">This is an item</p> </li> <li class=list-item> <label> <input type="checkbox" name="checkbox" />Item3 </label> <p class="item-description">This is an item</p> </li> </ul>