CSS弹出菜单

Question

我在使用此菜单时遇到麻烦，希望有人可以帮助我。

我有一个div，它是可悬停的，并且我试图让它显示几个（在此示例中，仅一个）菜单选项。但是一旦光标离开主btn，菜单就会向后折叠。

有人可以帮忙吗？

.upload-image {
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    -webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -3000;
  
}

.upload-media:hover .upload-image {
    -webkit-transform: translate(40px,-45px);
    -moz-transform: translate(40px,-45px);
    -o-transform: translate(40px, -45px);
    -ms-transform: translate(40px,-45px);
    transform: translate(40px,-45px);
}
    


.upload-media {

    width: 50px;
    height: 50px;
    background: #ff5fa7;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    left: 50%;
    top:50px;
    position: relative;
}

    .upload-media::after {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 4px;
        margin-top: -2px;
        top: 50%;
        left:15px;
        right:15px;
        z-index: 9;
        border-radius: 5px;
    }
    .upload-media::before {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        width: 4px;
        margin-left: -2px;
        left: 50%;
        top: 15px;
        bottom: 15px;
        z-index: 9;
        border-radius: 5px;
    }

<div class="upload-media">
  <div class="upload-image">
  </div>
</div>

https://codepen.io/anon/pen/mjJQzo

Answer 1

您所需要做的就是添加父级元素。

<div class="circle-menu">
  <div class="upload-media">
    <div class="upload-image">
    </div>
  </div>
</div>

然后将悬停更改为父元素。

.circle-menu:hover .upload-image {
    -webkit-transform: translate(40px,-45px);
    -moz-transform: translate(40px,-45px);
    -o-transform: translate(40px, -45px);
    -ms-transform: translate(40px,-45px);
    transform: translate(40px,-45px);
}

完整代码：

.upload-image {
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    -webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -3000;
  
}

.circle-menu:hover .upload-image {
    -webkit-transform: translate(40px,-45px);
    -moz-transform: translate(40px,-45px);
    -o-transform: translate(40px, -45px);
    -ms-transform: translate(40px,-45px);
    transform: translate(40px,-45px);
}
    


.upload-media {

    width: 50px;
    height: 50px;
    background: #ff5fa7;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    left: 50%;
    top:50px;
    position: relative;
}

    .upload-media::after {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 4px;
        margin-top: -2px;
        top: 50%;
        left:15px;
        right:15px;
        z-index: 9;
        border-radius: 5px;
    }
    .upload-media::before {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        width: 4px;
        margin-left: -2px;
        left: 50%;
        top: 15px;
        bottom: 15px;
        z-index: 9;
        border-radius: 5px;
    }

<div class="circle-menu">
  <div class="upload-media">
    <div class="upload-image">
    </div>
  </div>
</div>

Answer 2

问题在于，只要您不再悬停在.upload-media div上，CSS :hover选择器就不再起作用。您可以使用jQuery的$().hover()函数及其$().css()函数来更改类的CSS。

.upload-image {
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    -webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -3000;
  
}

/*.upload-media:hover .upload-image {
    -webkit-transform: translate(40px,-45px);
    -moz-transform: translate(40px,-45px);
    -o-transform: translate(40px, -45px);
    -ms-transform: translate(40px,-45px);
    transform: translate(40px,-45px);
}*/
    


.upload-media {

    width: 50px;
    height: 50px;
    background: #ff5fa7;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    left: 50%;
    top:50px;
    position: relative;
}

    .upload-media::after {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 4px;
        margin-top: -2px;
        top: 50%;
        left:15px;
        right:15px;
        z-index: 9;
        border-radius: 5px;
    }
    .upload-media::before {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        width: 4px;
        margin-left: -2px;
        left: 50%;
        top: 15px;
        bottom: 15px;
        z-index: 9;
        border-radius: 5px;
    }

<div class="upload-media">
  <div class="upload-image">
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.upload-media').hover(function(){
  $('.upload-image').css('transform','translate(40px,-45px)');
});
</script>

纯Javascript方法（将mouseover悬停在upload-image上添加事件侦听器，并在upload-media上添加类）：

.upload-image {
    width: 50px;
    height: 50px;
    background: #333;
    border-radius: 25px;
    position: absolute;
    left: 0;
    top: 0;
    cursor: pointer;
    -webkit-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -moz-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    -o-transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
    z-index: -3000;
  
}

.upload-image-visible {
    -webkit-transform: translate(40px,-45px);
    -moz-transform: translate(40px,-45px);
    -o-transform: translate(40px, -45px);
    -ms-transform: translate(40px,-45px);
    transform: translate(40px,-45px);
}
    


.upload-media {

    width: 50px;
    height: 50px;
    background: #ff5fa7;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 31px 0px rgba(0,0,0,0.35);
    left: 50%;
    top:50px;
    position: relative;
}

    .upload-media::after {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        height: 4px;
        margin-top: -2px;
        top: 50%;
        left:15px;
        right:15px;
        z-index: 9;
        border-radius: 5px;
    }
    .upload-media::before {
        content: " ";
        position: absolute;
        display: block;
        background-color: #fff;
        width: 4px;
        margin-left: -2px;
        left: 50%;
        top: 15px;
        bottom: 15px;
        z-index: 9;
        border-radius: 5px;
    }

<div class="upload-media">
  <div class="upload-image">
  </div>
</div>
<script>
document.getElementsByClassName("upload-media")[0].addEventListener("mouseover", function(){
document.getElementsByClassName("upload-image")[0].classList.add("upload-image-visible");
});
</script>

Answer 3

我认为您的目标是实现这样的美丽

使用SVG滤镜制作的

。那是可选的，您可以编辑和删除它。

所有功劳归给{strong> Lucas Bebber ，This pen

查看整页代码段

body {
  background: #ccc;
}

.menu {
  margin-top: 100px;
  -webkit-filter: url("#goo");
  filter: url("#goo");
}

.menu-item,
.menu-open-button {
  background: #e91e63;
  border-radius: 100%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  position: absolute;
  top: 20px;
  color: white;
  text-align: center;
  line-height: 80px;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  transition: -webkit-transform ease-out 200ms;
  transition: transform ease-out 200ms;
  transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;
}

.menu-open {
  display: none;
}

.hamburger {
  width: 25px;
  height: 3px;
  background: white;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -12.5px;
  margin-top: -1.5px;
  transition: -webkit-transform 200ms;
  transition: transform 200ms;
  transition: transform 200ms, -webkit-transform 200ms;
}

.hamburger-1 {
  -webkit-transform: translate3d(0, -8px, 0);
  transform: translate3d(0, -8px, 0);
}

.hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.hamburger-3 {
  -webkit-transform: translate3d(0, 8px, 0);
  transform: translate3d(0, 8px, 0);
}

.menu-open:checked+.menu-open-button .hamburger-1 {
  -webkit-transform: translate3d(0, 0, 0) rotate(45deg);
  transform: translate3d(0, 0, 0) rotate(45deg);
}

.menu-open:checked+.menu-open-button .hamburger-2 {
  -webkit-transform: translate3d(0, 0, 0) scale(0.1, 1);
  transform: translate3d(0, 0, 0) scale(0.1, 1);
}

.menu-open:checked+.menu-open-button .hamburger-3 {
  -webkit-transform: translate3d(0, 0, 0) rotate(-45deg);
  transform: translate3d(0, 0, 0) rotate(-45deg);
}

.menu {
  position: absolute;
  left: 50%;
  margin-left: -190px;
  padding-top: 20px;
  padding-left: 190px;
  width: 380px;
  height: 250px;
  box-sizing: border-box;
  font-size: 20px;
  text-align: left;
}

.menu-item:hover {
  background: white;
  color: #e91e63;
}

.menu-item:nth-child(3) {
  transition-duration: 180ms;
}

.menu-item:nth-child(4) {
  transition-duration: 180ms;
}

.menu-item:nth-child(5) {
  transition-duration: 180ms;
}

.menu-item:nth-child(6) {
  transition-duration: 180ms;
}

.menu-item:nth-child(7) {
  transition-duration: 180ms;
}

.menu-item:nth-child(8) {
  transition-duration: 180ms;
}

.menu-item:nth-child(9) {
  transition-duration: 180ms;
}

.menu-open-button {
  z-index: 2;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-duration: 400ms;
  -webkit-transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  transform: scale(1.1, 1.1) translate3d(0, 0, 0);
  cursor: pointer;
}

.menu-open-button:hover {
  -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);
  transform: scale(1.2, 1.2) translate3d(0, 0, 0);
}

.menu-open:checked+.menu-open-button {
  transition-timing-function: linear;
  transition-duration: 200ms;
  -webkit-transform: scale(0.8, 0.8) translate3d(0, 0, 0);
  transform: scale(0.8, 0.8) translate3d(0, 0, 0);
}

.menu-open:checked~.menu-item {
  transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);
}

.menu-open:checked~.menu-item:nth-child(3) {
  transition-duration: 180ms;
  -webkit-transform: translate3d(0.08361px, -104.99997px, 0);
  transform: translate3d(0.08361px, -104.99997px, 0);
}

.menu-open:checked~.menu-item:nth-child(4) {
  transition-duration: 280ms;
  -webkit-transform: translate3d(90.9466px, -52.47586px, 0);
  transform: translate3d(90.9466px, -52.47586px, 0);
}

.menu-open:checked~.menu-item:nth-child(5) {
  transition-duration: 380ms;
  -webkit-transform: translate3d(90.9466px, 52.47586px, 0);
  transform: translate3d(90.9466px, 52.47586px, 0);
}

.menu-open:checked~.menu-item:nth-child(6) {
  transition-duration: 480ms;
  -webkit-transform: translate3d(0.08361px, 104.99997px, 0);
  transform: translate3d(0.08361px, 104.99997px, 0);
}

.menu-open:checked~.menu-item:nth-child(7) {
  transition-duration: 580ms;
  -webkit-transform: translate3d(-90.86291px, 52.62064px, 0);
  transform: translate3d(-90.86291px, 52.62064px, 0);
}

.menu-open:checked~.menu-item:nth-child(8) {
  transition-duration: 680ms;
  -webkit-transform: translate3d(-91.03006px, -52.33095px, 0);
  transform: translate3d(-91.03006px, -52.33095px, 0);
}

.menu-open:checked~.menu-item:nth-child(9) {
  transition-duration: 780ms;
  -webkit-transform: translate3d(-0.25084px, -104.9997px, 0);
  transform: translate3d(-0.25084px, -104.9997px, 0);
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<nav class="menu">
  <input type="checkbox" href="#" class="menu-open" name="menu-open" id="menu-open" />
  <label class="menu-open-button" for="menu-open">
    <span class="hamburger hamburger-1"></span>
    <span class="hamburger hamburger-2"></span>
    <span class="hamburger hamburger-3"></span>
  </label>

  <a href="#" class="menu-item"> <i class="fa fa-bar-chart"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-plus"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-heart"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-envelope"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-cog"></i> </a>
  <a href="#" class="menu-item"> <i class="fa fa-ellipsis-h"></i> </a>
</nav>


<!-- filters -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <defs>
      <filter id="shadowed-goo">
          
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
          <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 -0.2" result="shadow" />
          <feOffset in="shadow" dx="1" dy="1" result="shadow" />
          <feComposite in2="shadow" in="goo" result="goo" />
          <feComposite in2="goo" in="SourceGraphic" result="mix" />
      </filter>
      <filter id="goo">
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
          <feComposite in2="goo" in="SourceGraphic" result="mix" />
      </filter>
    </defs>
</svg>