1. Write before
The previous understanding was that a hover pseudo class is written on an element and the mouse can move over it to modify the style of that element. Can you change the style of another non-hover element?When using less, you can write as follows:

.nav:hover{
    color:red;
    .block{
        color:blue;
    }
}

The meaning is that when hover to nav, it changes both the NAV style and another arbitrary block element style.So in css we can do this:

<div class='out'>
    <div class="in">1</div>
</div>

.out:hover .in{
   color:red;
}

This can also be used when you have pseudo classes like normal descendants or derived selectors, meaning that the style of the subclass in element changes when the out element hover.
Based on this idea, normal css selector methods can be used in this way.

.show_up:hover+.show_down{
        background-color: #f00;
    }
//Brother selector, show_under the same parent elementUp, show_down, when show_Show_when up is hover edDown's style changes.

2. demo with these

<div class="block">
    <div class="show_up">upBlock</div>
    <div class="show_down">DownBlock</div>
</div>

.block{
        margin: 10px auto;
        width: 160px;
        height: 60px;
        border:1px solid #ff0;
        text-align: center;
        line-height: 60px;
        position: relative;
        overflow: hidden;
    }
    .show_up,.show_down{
        width: 100%;
        height: 60px;
        transition: all 0.2s ease;
    }
    .show_up{
        position: absolute;
        background-color: #ff0;
        top:-60px;
    }
    .block:hover .show_up{
        top:0px;
    }

3. hover demo (css + a small amount of js) for common LIS

<div class="sample2">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li class="line"></li>
    </ul>
</div>

.sample2{
        margin: 10px auto;
        /*border:1px solid #ff0;*/
        width: 800px;
        height: 62px;
        padding: 0px;
    }
    .sample2 ul{
        margin: 0px;
        width: 840px;
        display: block;
        padding: 0px;
        position: relative;
    }
    .sample2 ul li{
        width:160px;
        height:60px;
        display: inline-block;
        background-color: #ee0;
        text-align: center;
        line-height: 60px;
        list-style-type: none;
    }
    .line{
        position: absolute;
        top:-4px;
        left:0px;
        height:4px !important;
        background-color: #00f !important;
        transition: all 0.2s ease;
    }
    .sample2 ul li:hover{
        color:#fff;
    }

var li = document.querySelectorAll('.sample2 ul li');
    // console.log(line);
    var sample2 = document.querySelector('.sample2 ul');
    var line = document.querySelector('.line');
    sample2.onmouseover = function(e){
        // console.log(e.target);
    for(var i=0;i<li.length-1;i++){
        if(li[i]==e.target){
            line.style.left = 165*i+'px';
        }
      }
    }