Question

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

我的HTML，当我将鼠标悬停在第二个或第三个元素上时，我想显示“无拇指”并隐藏“有拇指”

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

Answer 2

css中没有“上一个元素”选择器，但您可以将父元素的：hover选择器与：first-child一起使用

请参见摘要：将鼠标悬停在第二个或第三个元素上时，不显示第一个元素。

.no-thumb {
  display: none;
}

.TopList:hover .lists:first-child .has-thumb {
  display: none;
}

.TopList:hover .lists:first-child .no-thumb {
  display: block;
}

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

.TopList:hover .lists:first-child:hover .no-thumb {
  display: none;
}

.lists {
  border: 1px solid black;
}

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

Answer 3

您应该使用javascript或jQuery

jQuery('.lists').mouseover(function () {

    if (!jQuery(this).is(':first-child')) {

         jQuery('.lists:first-child .no-thumb').show();
         jQuery('.lists:first-child .has-thumb').hide();
    }
}).mouseleave(function () {
         jQuery('.lists:first-child .no-thumb').hide();
         jQuery('.lists:first-child .has-thumb').show();
})

为此，您可以在普通javascrpt中对此进行HTML更改

<div class="TopList" id="TopList">
            <div class="lists">
                <div class="no-thumb" style="display:none"></div>
                <div class="has-thumb" style="display: block"></div>
            </div>
            <div class="lists" onmouseenter="javascript:overfunction()" onmouseout="javascript:blurfunction()">
                <div class="no-thumb"></div>
                <div class="has-thumb"></div>
            </div>
            <div class="lists" onmouseenter="javascript:overfunction()" onmouseout="javascript:blurfunction()">
                <div class="no-thumb"></div>
                <div class="has-thumb"></div>
            </div>
        </div>

以及其中的脚本

<script>
function overfunction(){

    var firstEl =  document.getElementById('TopList').children[0]

    firstEl.children[0].style.display = 'block'
    firstEl.children[1].style.display = 'none'
}

function blurfunction(){

    var firstEl =  document.getElementById('TopList').children[0]

    firstEl.children[0].style.display = 'none'
    firstEl.children[1].style.display = 'block'
}
</script>

Answer 4

请尝试使用此工具，它可以正常工作，仅使用CSS。

.TopList:hover .lists:first-child .no-thumb{ 
	display:block !important;	
 } 
  .TopList:hover .lists:first-child .has-thumb{ 
	display:none !important;	
 }

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

Answer 5

See This solution and use accordingly-

点击此处（https://codepen.io/vishnavneet/pen/XWrzgxb/）

将鼠标悬停在第二或第三元素上时更改CSS第一子元素

5 个答案: