有关CSS弹出菜单?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (101)

我对这个菜单有问题,我希望有人能帮我。

我有一个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

提问于
用户回答回答于

你要做的就是添加像这样的父元素

<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>

用户回答回答于

问题是,一旦你不再在.upload-mediadiv,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方法

.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>

扫码关注云+社区

领取腾讯云代金券