是否可以根据特定区域的宽度应用悬停属性

Is it possible to apply hover property based on width of a particular area?

本文关键字：应用 属性 悬停 区域 是否      更新时间：2023-09-26

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。当我们点击按钮时，aside部分会收缩，菜单标题也会隐藏。我需要在相应的图标上悬停显示菜单标题。是否可以根据特定区域的宽度应用悬停属性(使用@media规则(？或者任何其他解决方案？

注意：当边的宽度为220px时(仅当宽度为60px时有效(

时，悬停属性不需要工作

这里，使用~通用兄弟CSS组合子，以及:hover伪类：

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>

相关文章：