有关CSS弹出菜单?

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

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

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

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

提问于
用户回答回答于

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

热门问答

在serverless中,我能否自己host 一个express(nodejs)的服务?

Tina

腾讯云 · 产品经理 (已认证)

Go Serverless!
推荐
您好,可以这样的。您可以参考如下文档,申请下http function 您可以使用常见的 WEB 框架(如 Nodejs Web 框架:Express、Koa)编写 HTTP 函数。而 WEB 框架内置的一些中间件(如cors)也会极大的方便您的业务编写 文档链接 https:...... 展开详请

使用有过期时间的签名往Cos存储桶中上传文件,若上传还在进行中签名过期,上传是否会终止?

galenye

腾讯 · 工程师 (已认证)

对象存储专业搬砖工
推荐已采纳

如果你是使用的简单上传,它能接收5g以内的文件,那签名过期的文件还在上传的话,是没影响的,因为签名判断是在cos接受到请求时。

如果你是使用的sdk等封装的分片上传,那其实是多个请求去上传文件,如果签名过期了,那上传到某一刻,后面的请求都会返回403

存储桶的默认加速域名 cdn 如何更改业务类型, 即把静态加速改成下载加速?

Jinqn

腾讯 · 高级工程师 (已认证)

腾讯云COS前端开发
推荐

我理解你意思是,浏览器打开的时候要下载,不要直接显示。

通过存储桶的文件 Content-Type 来控制

为何我使用.Net API 生成的临时密钥无法进行文件操作?

推荐
cos有自己的密钥系统,应该是在控制台上,访问管理,API密钥,项目密钥那里,或者去看看cos的文档是如何说明的吧。 你通过ms接口创建cos临时密钥,也许的确会被限制一些,这个需要ms这个产品的人回答下比较好。 生成临时密钥和哪个SDK无关,可以直接在线调用也可以生成,通过AP...... 展开详请

请问微信云支付是否有沙箱环境?

HKC

红客学院 · 创始人 (已认证)

道可道 非常道 名可名 非常名
推荐
微信支付沙箱环境,是提供给微信支付商户的开发者,用于模拟支付及回调通知。以验证商户是否理解回调通知、账单格式,以及是否对异常做了正确的处理。 ◆ 如何对接沙箱环境? 1、修改商户自有程序或配置中,微信支付api的链接,如:被扫支付官网的url为:https://api.mch.w...... 展开详请

tencentcloud-sdk-php-master github代码上没有vendor文件夹?

推荐
因为和composer冲突,因此导出时没有包含vendor目录。如果需要,可以考虑git clone方式拿到,或者到https://cloud.tencent.com/document/sdk/PHP#.E9.80.9A.E8.BF.87.E6.BA.90.E7.A0.81.E5...... 展开详请

所属标签

扫码关注云+社区

领取腾讯云代金券