特定の領域の幅に基づいてホバープロパティを適用できますか？上記のコードで

Question

function shrinkMenu(){ 
 
document.getElementById("aside").className="aside-after-click"; 
 
document.getElementById("main").className="main-after-click"; 
 
    var l= document.getElementsByClassName('hide-menu'); 
 
     for (var j = 0;j < l.length ; j++) { 
 
      l[j].classList.add("hide-menu-after-click"); 
 
     } 
 
}

ul,li { 
 
    list-style:none; 
 
    } 
 
#aside { 
 
    float:left; 
 
    /*width:220px;*/ 
 
    height:60px; 
 
    background-color:red; 
 
    } 
 
.aside{ 
 
width:220px; 
 
} 
 

 
.aside-after-click{ 
 
width:60px; 
 
} 
 
#main { 
 
    float:left; 
 
    
 
    height:60px; 
 
    background-color:green; 
 
    } 
 
.main{ 
 
    width:calc(100% - 220px); 
 
} 
 
.main-after-click{ 
 
    width:calc(100% - 60px); 
 
} 
 
#button{ 
 
    margin-top:10px; 
 
    margin-left:10px; 
 
    } 
 
.hide-menu-after-click{ 
 
display:none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<div id="aside" class="aside"> 
 
    <ul> 
 
    <li> 
 
     <i class = "fa fa-glass" > </i> 
 
     <span class="hide-menu"> menu title1 </span> 
 
    </li> 
 
    <li> 
 
     <i class = "fa fa-glass" > </i> 
 
     <span class="hide-menu"> menu title2 </span> 
 
    </li> 
 
    <li> 
 
     <i class = "fa fa-glass" > </i> 
 
     <span class="hide-menu"> menu title3 </span> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="main" class="main"> 
 
    <button type="button" onclick="shrinkMenu();" id="button">shrink menu</button> 
 
</div> 
 

主に私たちは二つの部分1.aside 2.mainを持っています。私たちがボタンをクリックすると、部分が縮小し、メニュータイトルも表示されません。メニュータイトルを対応するアイコンに表示する必要があります。特定の領域の幅に基づいてホバープロパティを適用することは可能です（@メディアルール）？これを解決するための他の選択肢はありますか？

注：ホバープロパティはさておきは幅を持っている場合、作業をする必要はありません：220pxは（のみ動作するときの幅：60PX）:hover擬似クラスと一緒に、~general siblings CSS combinatorを使用してここで

Answer 1

、 ：幅具体的に

function shrinkMenu() { 
 
    document.getElementById("aside").className = "aside-after-click"; 
 
    document.getElementById("main").className = "main-after-click"; 
 
    var l = document.getElementsByClassName('hide-menu'); 
 
    for (var j = 0; j < l.length; j++) { 
 
    l[j].classList.add("hide-menu-after-click"); 
 
    } 
 
}

ul, 
 
li { 
 
    list-style: none; 
 
} 
 
#aside { 
 
    float: left; 
 
    /*width:220px;*/ 
 
    height: 60px; 
 
    background-color: red; 
 
} 
 
.aside { 
 
    width: 220px; 
 
} 
 
.aside-after-click { 
 
    width: 60px; 
 
} 
 
.aside-after-click:hover { 
 
    width: 220px; 
 
} 
 
#main { 
 
    float: left; 
 
    height: 60px; 
 
    background-color: green; 
 
} 
 
.main, 
 
.aside-after-click:hover ~ .main-after-click { 
 
    width: calc(100% - 220px); 
 
} 
 
.main-after-click { 
 
    width: calc(100% - 60px); 
 
} 
 
#button { 
 
    margin-top: 10px; 
 
    margin-left: 10px; 
 
} 
 
.hide-menu-after-click { 
 
    display: none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<div id="aside" class="aside"> 
 
    <ul> 
 
    <li> 
 
     <i class="fa fa-glass"> </i> 
 
     <span class="hide-menu"> menu title1 </span> 
 
    </li> 
 
    <li> 
 
     <i class="fa fa-glass"> </i> 
 
     <span class="hide-menu"> menu title2 </span> 
 
    </li> 
 
    <li> 
 
     <i class="fa fa-glass"> </i> 
 
     <span class="hide-menu"> menu title3 </span> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<div id="main" class="main"> 
 
    <button type="button" onclick="shrinkMenu();" id="button">shrink menu</button> 
 
</div>