javascript - 悬停第二个或第三个元素时更改 CSS 第一个子元素

Question

我想在悬停第二个或第三个元素时更改第一个子元素的 CSS

我的 HTML，我想在悬停第二个或第三个元素时显示“no-thumb”并隐藏“has-thumb”

.TopList .lists:hover .has-thumb,
.no-thumb {
  display: none;
}

.TopList .lists:hover .has-thumb {
  display: block;
}

<div class="TopList">
  <div class="lists">
    <div class="no-thumb" style="display:none"></div>
    <div class="has-thumb" style="display: block"></div>
  </div>
  <div class="lists">
    <div class="no-thumb"></div>
    <div class="has-thumb"></div>
  </div>
  <div class="lists">
    <div class="no-thumb"></div>
    <div class="has-thumb"></div>
  </div>
</div>

Answer 1

一个 JavaScript 解决方案是简单地添加或删除一个预制的 CSS 类，该类在鼠标悬停在第二个和第三个元素上和鼠标移出时隐藏一个元素。

// Get references to the elements that will be shown/hidden
let noThumb = document.querySelector(".no-thumb");
let hasThumb = document.querySelector(".has-thumb");

// Set up an event handler for when the entire list is hovered
document.querySelector(".TopList").addEventListener("mouseover", function(event){ 
   // Check to see if the element being hovered is one we care about
   if(event.target.parentNode.classList.contains("hover")) {
     // Hide and show the elements.
     noThumb.classList.remove("hidden");
     hasThumb.classList.add("hidden");
   }
});

document.querySelector(".TopList").addEventListener("mouseout", function(event){
   if(event.target.parentNode.classList.contains("hover")) {
     noThumb.classList.add("hidden");
     hasThumb.classList.remove("hidden");
   }
});

.hidden { display:none; }
.lists { cursor:pointer; }

<div class="TopList">
   <div class="lists">
       <div class="no-thumb hidden">no thumb</div>
       <div class="has-thumb">has thumb</div>
   </div>
   <div class="lists hover">
       <div class="no-thumb">x</div>
       <div class="has-thumb">x</div>
   </div>
   <div class="lists hover">
       <div class="no-thumb">x</div>
       <div class="has-thumb">x</div>
   </div>
</div>