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

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

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> 

Answer 2

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 3

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

See This solution and use accordingly-

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