change CSS first child element when hover second or third element

Question

I want to change the CSS of first child element when hovering second or third element

My HTML, I want to show "no-thumb" and hide "has-thumb" when hovering second or third element

.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

<div class="container">
  <div class="el first">First</div>
  <div class="el second">Second</div>
</div>

<style>
.container {
  display: flex;
  flex-direction: column;
}

.el {
  width: 100px;
  height: 20px;
  border: 1px solid black;
  font-weight: 600px;
  font-size: x-large;
}

.container:has(.secondEl:focus) .firstEl {
  background: red;
  color: white;
}
</style>

<div class="container">
  <div class="el first">First</div>
  <div class="el second">Second</div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: column;
  }

  .el {
    width: 100px;
    height: 20px;
    border: 1px solid black;
    font-weight: 600;
    font-size: x-large;
    padding: 10px;
    display: flex;
    align-items: center;
  }

  .container:has(.second:hover) .first {
    background: red;
    color: white;
  }
</style>
  < !-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->

    </style>

<!-- end snippet -->

    

Answer 2

you should use javascript or 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();
})

for do that in vanilla javascrpt your HTML changes in this

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

and the scripts in this

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

See This solution and use accordingly-

Click here (https://codepen.io/vishnavneet/pen/XWrzgxb/)

Answer 4

Please try with this, It is working as expected only CSS is used.

.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

There is no "previous element" selector in css but you can use the :hover selector of the parent element together with :first-child

See snippet: Show no-thumb of first element when hovering over 2nd or 3rd element.

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

A JavaScript solution would be to simply add or remove a pre-made CSS class that hides an element as the second and third items are moused over and moused out.

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