主页 / 问题 / 1126211
Accepted
Gagablik
Asked:2020-05-16 00:53:20 +0000 UTC2020-05-16 00:53:20 +0000 UTC

当您将鼠标悬停在菜单上方时，如何阻止、模糊和显示菜单顶部的铭文？

  • 772

与将鼠标悬停在菜单上时一样： 1. 阻止任何元素的点击 2. 使菜单半透明或模糊 3. 在菜单上对角显示“Only Reg”字样

.sidebar {
  background-color: #ccc;
  left: 0;
  top: 50px;
  bottom: 0;
  width: 240px;
}
.f_l {
 float: left;
}
.main-content {

}
.only_reg {
  display:none;
}
<div>
  
  <div class="sidebar f_l">
    <div class="only_reg">
      Only reg
    </div>
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
  </div>
  
  <div class="main-content">
    Content
  </div>
</div>

css

2 个回答

  1. Best Answer

    .wrapper {
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  position: relative;
  bottom: 0;
  left: 0;
  width: 240px;
  background-color: #ccc;
  user-select: none;
}

.f_l { float: left; }

.sidebar:hover ul {
  filter: blur(3px);
  pointer-events: none;
}

.only_reg {
  position: absolute;
  pointer-events: none;
  transform: rotate(130deg) scale(100) translate(0%, 0%);
  color: #f000;
  transition: .6s ease-in;
  transform-origin: center;
}
.sidebar:hover>.only_reg {
  transform: rotate(-30deg) scale(2.5) translate(70%, -25%);
  color: #f00f;
}
    <div class="wrapper">

  <div class="sidebar f_l">
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
    <div class="only_reg">
      Only reg
    </div>
  </div>

  <div class="main-content">
    Content
  </div>
</div>

    • 4 

  2. .sidebar {
  background-color: #ccc;
  left: 0;
  top: 50px;
  bottom: 0;
  width: 240px;
  display: flex;
  align-items: center;
}
.f_l {
 float: left;
}
.main-content {

}
.sidebar .only_reg {
  display: none;
}
.sidebar:hover ul li{
  opacity: 0.2;
}
.sidebar:hover ul li a{
  pointer-events: none;
}

.sidebar:hover .only_reg{
  display: block;
  position: absolute;
  transform: rotate(-45deg);
  text-align: center;
  font-size: 18px;
  padding-left: 15px;
}
    <div>
  
  <div class="sidebar f_l">
    <div class="only_reg">
    Only reg
    </div>
    <ul>
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
      <li><a href="#">Menu 4</a></li>
    </ul>
    
  </div>
  
  <div class="main-content">
    Content
  </div>
</div>

    • 2

相关问题